Angular の electron application をそのまま build する

はじめに

Angular の electron application をそのまま build する方法をまとめます。
Angular の electron アプリは maximegris/angular-electron のようなボイラープレートをベースに開発する記事が多いですが、今回は利用せず electron-userland/electron-builder をそのまま利用していきます。

Angular の electron application をそのまま build する

まずは Angular CLI でプロジェクトを開始します。
ng serve でいつもの画面が出ることを確認します。

$ ng new angular-electron
$ cd angular-electron
$ ng serve

Angular と electron の開発環境を作る

ng serve で十分ではありますが electron の window で確認したくなることがあるかもしれません。
大した手間ではないので electron を devDependencies にインストールします。

$ npm install --save-dev electron@latest

package.json に main と scripts に以下を追加します。

  "main": "main.js",
  "scripts": {
    ...
    "start:electron": "ng build --base-href ./ && tsc -p tsconfig.electron.json && electron .", // 追加
    ...
  }

package.json と同じ階層の project root dir に main.ts を配置します。
webPreferences で webSecurity: false を指定すると CORS を無視できるようです。

const { app, BrowserWindow } = require('electron');
const url = require('url');
const path = require('path');

let mainWindow;

function createWindow(): void {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false,
    },
  });

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: 'file:',
      slashes: true,
    })
  );
  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

今回 main.ts と typescript ファイルとしたので tsconfig.electron.json として tsconfig をproject root に配置します。
"target": "es2015" でもそのまま動くようです。

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "target": "es2015",
    "types": ["node"],
    "lib": ["es2017", "es2016", "es2015", "dom"]
  },
  "files": ["main.ts"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

最後に angular.json の outputPath を dist に変更します。
json はコメントアウトできないので削除してください。

...
"options": {
  ...
  // "outputPath": "dist/angular-electron", <- 削除
  "outputPath": "dist",
  ...
}

それでは electron の開発環境を start してみましょう。
main.js で mainWindow.webContents.openDevTools(); としているのでデバッグコンソールごと開きます。

$ npm run start:electron

Angular の electron application を build する

mac や windows 向けに electron を build していきます。
electron-builder を devDependencies にインストールします。

$ npm install --save-dev electron-builder

electron-builder.json を project root に配置します。
このファイルの files 配下がビルドに含めるファイルとなります。
"output": "release/" としているので angular の outputPath とは別に release というフォルダに実行ファイルが吐かれます。

{
  "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"]
  }
}

package.json の scripts に以下を追加します。

  "scripts": {
    ...
    "electron:build:mac": "npm run build:electron && node_modules/.bin/electron-builder build --mac --x64",
    "electron:build:win": "npm run build:electron && node_modules/.bin/electron-builder build --win --x64",
    "build:electron": "npm run electron:tsc && ng build --base-href ./",
    "electron:tsc": "tsc -p tsconfig.electron.json"
  },

あとはターミナルから build するだけ！

$ # mac 向けの build
$ npm run electron:build:mac
$ # win 向けの build
$ npm run electron:build:win

すると release フォルダに dmg/exe ができているので実行するだけ！
macであれば application フォルダに入れちゃいなよって出ます。

まとめ

Angular の electron application をそのまま build する方法をまとめました。
github レポジトリに置いておいたので参考にしてください。

github.com

参考

qiita.com