Angular+Electron事始め

Angular

2020/06/09

はじめに

Electronが気になっていた今日このごろ。
Angularを久しぶりに触りたいこともあり、Angular + Electronでアプリを作ってみようと思う。
とりあえずAngular-CLIで作ったテンプレートをElectron使って起動できるところまですすめていく。

TL;DR.

ソースコード

手順

Angularプロジェクト作成

# いつも通りCLIからスタート
$ng new angular-electron

Electronインストール

$ npm install electron --save-dev

起動できるように修正

公式ドキュメントとangular-electron を参考に作っていく。

Angular.jsonを修正

projects > architect > build > oprions > outputPathを/dist/プロジェクト名(今回はangular-electron)をdistのみに修正。

{
  ...
  "projects": {
    ...
    "architect": {
      "build": {
        ...
        "options": {
          "outputPath": "dist",
          ...

main.jsを作成

アプリを起動するためのjsを作成する。
tsで書きたかったりホットリロードとかも試したいところだけど、
一旦jsでちゃんと動くところまで確認する。

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

let win = null;

function createWindow() {
  const electronScreen = screen;
  const size = electronScreen.getPrimaryDisplay().workAreaSize;

  // ブラウザウインドウを作成
  win = new BrowserWindow({
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: 'file:',
    slashes: true
  }));

  // dev toolを開く
  win.webContents.openDevTools();

  win.on('closed', () => win = null);

  return win;
};

app.allowRendererProcessReuse = true;

app.on('ready', () => setTimeout(createWindow, 400));
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

package.jsonを修正

electronコマンドで起動できるようにpackage.jsonのmainに上記ファイルを指定する。

{
  "name": "angular-electron",
  "main": "main.js",
  ...
}

起動できることを確認する

アプリを起動できることを確認する。
その前にAngularのビルドが必要なので実行しておく。

# Angularのファイルをビルド(最初から入っているコマンドそのまま)
$ npm run build
> dist配下にファイルが出力されていることを確認

# アプリを起動してみる
$ npx electron .

画像のようにAngular-CLIのテンプレートが表示されることを確認できればOK。

まとめ

Electron ＋ Angularでアプリを作ってみようと思ったので、とりあえず起動できるまでやった。
起動だけならさっくりできたので、次はmain.jsをts化したり、アプリを作っていきたいところ。

参考サイト