AngularとElectronの使用を開始する

Electron は、使い慣れたWebテクノロジー（HTML、JavaScript、CSS）を使用して、macOS、Linux、またはWindows用のデスクトップアプリを簡単に構築できる人気のフレームワークです。 Visual Studio CodeやSlackなどの非常に人気のあるデスクトップアプリは、Electronを使用して構築されています。舞台裏では、ElectronはUIレンダリングにChromiumを使用し、ファイルシステムアクセスにNode.jsを使用しています。 ElectronはWebアプリ用のデスクトップシェルを提供しているため、あらゆる種類のフロントエンドJavaScriptフレームワークを使用してデスクトップアプリを開発できます。

この短いガイドでは、Electronを使用してデスクトップで起動できる新しいAngularアプリケーションを作成します。

インストール

ターミナルを開き、最新バージョンの AngularCLIをグローバルにインストールします。

npm i -g @angular/cli

作業フォルダーに移動して、my-appという新しいAngularアプリを作成しましょう。

ng new my-app
cd my-app
npm i -D electron@latest

上記の注釈付きの行は、最新バージョンのElectronを開発依存関係としてインストールします。

セットアップと電子入力ファイル

次に、プロジェクトのディレクトリのルートにmain.jsファイルを作成しましょう。このファイルは、Electronアプリのエントリポイントになり、デスクトップアプリのメインAPIが含まれます。

main.js

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

let win;
function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });
  // load the dist folder from Angular
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, "/dist/index.html"),
      protocol: "file:",
      slashes: true
    })
  );
  // The following is optional and will open the DevTools:
  // win.webContents.openDevTools()
  win.on("closed", () => {
    win = null;
  });
}
app.on("ready", createWindow);
// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

上記は公式のelectron-quick-startプロジェクトに基づいていますが、主な違いは、Angularアプリのエントリポイントを正しくロードすることです。 TypeScriptに固執することをお勧めします。そうであれば、同等のTypeScriptクイックスタートがここ[X106X]にあります。

ElectronとTypeScriptに関するメモ

TypeScriptを使用してAngularアプリを開発するので、メインのElectronエントリファイル（main.ts）に対してもTypeScriptを使用することを選択できます。ただし、プロジェクトのpackage.jsonのmainキーは、同じmain.jsを指している必要があることに注意してください。

アプリを起動する前に、JavaScriptにコンパイルするためのtscコマンドを追加するだけです。このような何かがトリックを行う必要があります：

"electron-tsc": "tsc main.ts && ng build --base-href ./ && electron ."

次に、プロジェクトのpackage.jsonファイルを更新して、Electronファイルをメインのエントリポイントとして検索できるようにします。

package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "main": "main.js", 
  ...

ここにいる間に、npmスクリプトを追加してAngularアプリをビルドし、Electronアプリを起動しましょう。

package.json

"scripts": {
   "electron": "ng build --base-href ./ && electron .",
   ...

ここで–base-href フラグは、index.htmlファイルでbaseタグのhref属性の値がであることをAngularCLIに示すために重要です。 /。

Angularプロジェクトの出力パスから名前を削除して、main.jsファイルにあるものを反映させましょう。

angle.json

...,
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist",

v6より前のバージョンのAngularを使用している場合は、代わりにoutDirキーの下でプロジェクトのangular-cli.jsonを変更する必要があります。

アプリの実行

これでアプリの準備が整いました。作成したelectronnpmスクリプトを使用してアプリを起動できます。

npm run electron

そして、Angularアプリケーションが含まれているウィンドウが表示されるはずです！

これは、起動して実行するのに十分なはずです。 Angularアプリから直接ElectronAPIを使用したり、ホットモジュールのリロードを設定したりする方法について、さらに詳しく見ていきましょう。