Zenn
😊

Electron + Angularセットアップ

2021/09/25に公開
Angular
Electron
tech

■2022/1/2 追記
type scriptでmain.jsを置き換えていたが、その意味は特になく、久々にこのエントリ通りに作ったら動かなかったので修正する。なおanular/cliのversionは13

自分用メモでもある。超最低限ミニマルスタイルのセットアップです
この手の紹介しているサイトはたくさんありましたが、Angular12のせいなのか全然動かなくなっていました。ng serve --openでちゃんと動くのに、eletronを立ち上げると{{title}}みたいなとかcomponentでセットした値が表示されずにそのまま出るみたいなことに悩まされました

ここだけが動くセットアップを書いていた
が多少の改修が必要だったのでメモ

■ Angular install
(-gをつけてグローバルにインストールしないととngコマンドでエラーが出たりする)

npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

■ Electron プロジェクト作成

ng new PROJECT_NAME

■ electron install

npm install --save-dev electron@latest

■electronのmain.js作成
各項目は必要に応じて修正
loadUrlで指定しているパスがすごく重要

const {app, BrowserWindow, Menu} = require('electron')
const path = require("path");
// const Config = require('electron-config');

function createWindow(canvasObject) {

  const mainWindow = new BrowserWindow({
    width: 1600,
    height: 1280,
    'icon': 'img/icons/icon.ico',
    webPreferences: {
      worldSafeExecuteJavaScript: true,
      frame: false,
      backgroundColor: 'WHITE',
      contextIsolation: true,
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      useContentSize: true,
      enableRemoteModule: true,
    },
  })
  mainWindow.loadFile(path.join(__dirname, `/dist/index.html`)).then(r => 1)

  // Open the DevTools.
  //mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    app.quit();
  });
  // Build menu from template
  const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
  // Insert menu
  Menu.setApplicationMenu(mainMenu);
}


// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

const mainMenuTemplate = [
  // Each object is a dropdown
  {
    label: '',
    submenu: []
  }
];

■ package.json作成

{
  "name": "PROJECT_NAME",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:win": "npm run electron && node_modules/.bin/electron-builder build --win --x64",
    "electron": "ng build --base-href ./ && electron ."
  },

■src/app/app.component.html修正

<h1>{{title}}</h1>

■src/app/app.component.ts修正

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'TEST';
}

■src/index.html修正

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TEST</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

■angular.jsonのoutputPathのみ修正(すごく重要)

"outputPath": "dist",

■起動(画面にTESTと表示されるだけのアプリが立ち上がる)

npm run electron

■パッケージ配布準備

npm install --save-dev electron-builder

■electron-builder.json作成

{
  "productName": "angular-electron",
  "directories": {
    "output": "release/"
  },
  "files": [
    "**/*",
    "!**/*.ts",
    "!*.code-workspace",
    "!LICENSE.md",
    "!package.json",
    "!package-lock.json",
    "!src/",
    "!e2e/",
    "!hooks/",
    "!angular.json",
    "!_config.yml",
    "!karma.conf.js",
    "!tsconfig.json",
    "!tslint.json"
  ],
  "win": {
    "icon": "dist/assets/icons",
    "target": ["portable"]
  },
  "mac": {
    "icon": "dist/assets/icons",
    "target": ["dmg"]
  },
  "linux": {
    "icon": "dist/assets/icons",
    "target": ["AppImage"]
  }
}

■パッケージ化(electron-builder.json指定したディレクトリに生成)

npx electron-builder --win --x64 --dir

※更に追記
上記以外でもやっておいたほうがいいことがあったのでメモ

■text読み込むためのrow-loader設定

npm install raw-loader --save-dev

こことか
ここ

■json読み込むためのjson-loader
json

■簡単にモーダルを作れる
Angular Material
Materialが読み込めないとき

npm install --save @angular/material @angular/cdk hammerjs
npm install --save @angular/animations

Discussion