unhurried

コンピュータ関連ネタがほとんど、ときどき趣味も…

Angular 5 + Bootstrap 3でElectronアプリ開発

ElectronでAngular 5とBootstrap 3を使う方法をまとめました。ng-bootstrapやngx-bootstrapはAngular 5には対応していないため、Bootstrap 3を動かすためにjQueryを使っています。

  • Electronをインストールする。
npm -g install electron
  • Electron用のプロジェクトを新規作成する。
npm init -y
{
  ...
  "main": "main.js",
  ...
}
  • main.js ではこの後に作成するAngularプロジェクトのビルドで生成されるindex.htmlを参照するように設定する。
'use strict';

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

var mainWindow = null;

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

app.on('ready', function() {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadURL('file://' + __dirname + '/angular/dist/index.html');

  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});
  • Angular用のプロジェクトを作成してBootstrapとjQueryをインストールする。
npm install -g @angular/cli@latest
ng new angular
cd angular
npm install bootstrap --save
npm install jquery --save
npm install @types/jquery --save-dev
{
  ...
  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],
  ...
}
  • angular/src/index.html にbaseパスを指定する。
    • baseパスを指定しない場合、Electronは相対パスをルートからの相対パスを解釈してしまうため。
...
<head>
  <base href="./">
...
  • angular/src/index.htmlでJQueryを読み込む。
    • Electronの問題でBootstrapと同じ方法では読み込めない。
...
<script>
window.jQuery = window.$ = require('../node_modules/jquery/dist/jquery.min.js');
...
  • Angularビルド後にelectronコマンドを実行するとアプリを起動できる。
ng build
electron ../
その他
  • Angular 5をangular-cliでインストールした状態ではnpm依存関係の警告が出ますが、これは今後のアップデートで解消されると思います。
my-app@0.0.0 C:\Users\tkykt\home\git\electron-angular-bootstrap
+-- UNMET PEER DEPENDENCY @angular/compiler@5.0.1
+-- UNMET PEER DEPENDENCY @angular/core@5.0.1
`-- bootstrap@3.3.7

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.1.3
npm WARN codelyzer@3.2.2 requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none was installed.
npm WARN codelyzer@3.2.2 requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.0 but none was installed.
参考