Angular11でElectronをWebハイブリッドにする
Angular7でElectronを参考に最新で確認
プロジェクトを作ってElectronをインストール
npm i -g @angular/cli
ng new electron-sample
cd electron-sample
npm install --save-dev electron@latest
npm install --save-dev electron-packager@latest
npm install --save-dev ngx-build-plus@latest
webpackを拡張するための ngx-build-plus をインストールしているのがポイント。
いくつかのファイルを作ったり編集したり
main.jsを作る
main.js
ファイルをプロジェクトルート直下に作って、
Electronのチュートリアルページのコードをコピって、
12行目のwin.loadFile(filename)
の箇所を自分のアプリ用に編集する。
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('dist/electron-sample/index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
index.htmlを編集する
src/index.html
のhead内のbaseタグを次のように変える。
<base href="/"> → <base href=".">
webpack.extra.jsを作る
Angular CLIのバージョン6以降ではng eject
が使えず、webpackを編集できない。
なので、代わりにngx-build-plus
を使う。
webpack.extra.js
ファイルをプロジェクトルート直下に作って、次のように書いておく。
const webpack = require('webpack');
module.exports = {
'target': 'electron-renderer',
};
これをやらないと、nodeのモジュール(fsとかpathとか)が全然使えない。
angular.jsonを編集する
serveやbuild時に、@angular-devkit/build-angular
ではなく前述のngx-build-plus
を使うようにする。
~略~
"architect": {
"build": {
"builder": "ngx-build-plus:build",
~略~
"serve": {
"builder": "ngx-build-plus:dev-server",
package.jsonを編集する
main
にmain.js
を指定する行を追加し、
scripts
にビルドしてElectronでアプリを起動およびパッケージするコマンドを追加する。
{
"name": "electron-sample",
"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",
+ "electron": "ng build --extraWebpackConfig webpack.extra.js && electron ."
+ "package": "electron-packager . --out=dist/"
},
~略~
ng build --extraWebpackConfig webpack.extra.js
とすることで、前述のwebpack.extra.js
が反映される。
ビルドしたパッケージはdist
に出力する。
動かしてみる
npm run electron
で、Electronアプリとして起動される。
npm run package
で、WindowsやMac用にパッケージされた実行可能ファイルが出来上がる。
ng serve
最後にWEBでも動くことを確認。