有许多关于如何在Electron中运行Angular的文章，但由于环境和版本的问题，步骤略有不同，令我稍微遇到了一些困难。在此做个备忘录。

顺便提一下，我最终希望实现的目标是通过 Angular 的事件从 Electron 中调用本地文件，突破浏览器无法逾越的障碍。

环境

OS: mac OS Catalina 10.15.4
Angular CLI: 9.1.0
Node: 13.12.0

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.0
@angular-devkit/core         9.1.0
@angular-devkit/schematics   9.1.0
@schematics/angular          9.1.0
@schematics/update           0.901.0
rxjs                         6.5.4

建立步骤

创建 Angular 项目

ng new sample1

创建正常。
创建后立即打开/sample1/src/app/app.component.ts文件，因为linter会报错，如果你介意的话，可以翻转手掌，同时滑稽地发出“为什么呢”的发音，然后在空中轻拍一下，然后按照下面的方式进行修正。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html',
})
export class AppComponent {
  public title = 'sample1';
}

添加 Electron

cd sample1
npm install --save-dev electron@latest

更新されるため、npm のバージョンが 8.2.0 になります。

发现了2个轻微程度的漏洞
运行npm audit fix来修复它们，或查看npm audit获取详细信息。

但是他说过这句话时并没有付诸行动

需要手动审查的两个漏洞无法更新。

因为被说成是如此，所以就照原样。

为 Electron 添加执行 js 的功能

在底部添加 main.js 文件。

const { app, BrowserWindow } = require('electron');
let win;

function createWindow() {

  // ウインドウの作成
  win = new BrowserWindow({
    width: 800
    , height: 400
    , webPreferences: {
      nodeIntegration: true
    }
  })

  // ウインドウに表示する内容
  win.loadFile('dist/sample1/index.html');

  // デバッグ画面表示
  win.webContents.openDevTools();

  // このウインドウが閉じられたときの処理
  win.on('closed', () => {
    win = null;
  })
}

// アプリが初期化されたとき（起動されたとき）
app.on('ready', () => {
  createWindow();
})

// 全ウインドウが閉じられたとき
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
})

// アクティブになったとき（MacだとDockがクリックされたとき）
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
})

在 package.json 文件中添加用于 Electron 运行的 js 文件。

{
  "name": "sample1",
  "version": "0.0.0",
  "main": "main.js",
  ≈ 省略 ≈

将package.json文件中添加用于Electron构建的命令。

≈ 省略 ≈
"scripts": {
  ≈ 省略 ≈
  "start:electron": "ng build --base-href ./ && electron ."
},
≈ 省略 ≈

执行

npm run start:electron

开始运行。

下一步是进行事件控制。