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 レポジトリに置いておいたので参考にしてください。