開発者ドキュメント

AngularとElectronの使用を開始する

getdocs

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

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

インストール

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

  1. npm i -g @angular/cli

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

  1. ng new my-app

  2. cd my-app

  3. 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エントリファイルに対してもTypeScriptを使用することを選択できます（main.ts). ただし、 main プロジェクトのpackage.jsonのキーは引き続き同じを指す必要があります main.js.

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

"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を使用している場合は、代わりにプロジェクトに変更を加える必要があります。 angular-cli.json 下で outDir 鍵。

アプリの実行

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

  1. npm run electron

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

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

モバイルバージョンを終了