Angular + electron の環境構築

きっかけ

electronでUIフレームワークで何かいいものないかと探して、react／vueにたどり着いた。
しかし、さっぱり動きが分からない。
理解し難い。
それなら、以前使ったAngularならイケるだろうと思い、調査して、とりあえず連携させるまでできたので晒す。

環境

VisualStudioCodeのバージョン情報で事足りそうだったので、逐一コマンドは打って貼付はしない。

バージョン: 1.38.1 (system setup)
コミット: b37e54c98e1a74ba89e03073e5a3761284e3ffb0
日付: 2019-09-11T13:35:15.005Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Windows_NT x64 10.0.18362

実証

流れ

1. angularの実行環境準備
2. electornのインストール
3. main.jsの作成
4. Angularの設定変更
5. 実行スクリプトの準備
6. 実行

angularの実行環境準備

下記のコマンドを実行

npm install @angular/cli -g

プロジェクト毎にインストールメリットを感じなかったので、グローバルインストール。

インストールが終わったら、Angular用のプロジェクトを下記コマンドで作成する。

$ ng new angular-electron-demo

electornのインストール

Angularのもろもろの準備が終わったので、作成したプロジェクトに移動して、electronを入れる。
セキュリティを考慮して最新版を入れたが、何か特定のバージョンに思い入れがあれば、指定する。
※動作確認はしてないので、問題は各自で解決してね。

$ cd angular-electron-demo
$ npm install --save-dev electron@latest

自分の実行環境では、6.0.9が入ってきた

main.jsの作成

プロジェクトディレクトリ直下（package.jsonがあるディレクトリ）に、main.jsを作成する。

中身は、electronのquick-startからパクったやつ。

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  mainWindow.on("closed", function() {
    mainWindow = null;
  });
}

app.on("ready", createWindow);

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

app.on("activate", function() {
  if (mainWindow === null) createWindow();
});

Angularの設定変更

angular.jsonを開いて、出力先のパスを合わせる。

projects → angular-electron-demo → architect → build → options → outputPath の値を、dist/angular-electron-demo から dist に変える

  "projects": {
    "angular-electron-demo": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",

次に、package.json を開いて、実行するjsファイルを指定する。
"main": "main.js", を追記して終わり。

{
  "name": "angular-electron-demo",
  "version": "0.0.0",
  "main": "main.js",

実行スクリプトの準備

Angularのビルド→electornの実行の順で実行するためのスクリプトを下記の通り追加。
※start:electronを追記する

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:electron": "ng build --base-href ./ && electron ."
  },

実行

さっき追加したスクリプトを下記の通りに実行する。

$ npm run start:electron

そうすると、下記の画面が出てくるはず。

今回のソース

GitHub - suzaku-tec/angular-electron-demo

雑記

react、vueより扱いが簡単だといいな。。。

windows10って、print screen使えなくなった？
キーを叩いてもスクショがとれてなくて、結構、焦った。
snipping toolに移管していくつもりなのだろうか？

参考サイト

Electron with Angular 8|7 Tutorial | Techiediaries

Build Electron Desktop App with Angular 8 | Electron Angular Tutorial