Angular7でElectron
AngularでElectronアプリを開発する準備
Angular7版の情報が少なかったので、メモ。
プロジェクトを作って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
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');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;
function createWindow() {
// Create the browser window.
win = new BrowserWindow({ width: 800, height: 600 });
// and load the index.html of the app.
win.loadFile('dist/electron-sample/index.html');
// Open the DevTools.
win.webContents.openDevTools();
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null;
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
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 ."
},
~略~
ng build --extraWebpackConfig webpack.extra.js
とすることで、前述のwebpack.extra.js
が反映される。
動かしてみる
npm run electron
npm run electron
で、Electronアプリとして起動される。
npm run package
で、WindowsやMac用にパッケージされた実行可能ファイルが出来上がる。
Author And Source
この問題について(Angular7でElectron), 我々は、より多くの情報をここで見つけました https://qiita.com/iz-j/items/cf7860959a6bbbb59fba著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .