ElectronでAngular 5とBootstrap 3を使う方法をまとめました。ng-bootstrapやngx-bootstrapはAngular 5には対応していないため、Bootstrap 3を動かすためにjQueryを使っています。
npm -g install 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.
参考
