1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Angular11 + Electron11を3分で構築

Last updated at Posted at 2021-02-20

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を編集する

mainmain.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でも動くことを確認。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?