在Electron中运行Angular

假设已经安装了Node.js，我们将继续进行。

如果您尚未安装@angular/cli，请使用以下命令进行安装。
（详细信息略。）

npm install -g @angular/cli

创建一个Angular项目

ng new angular-with-electron

我认为大致可以完成这样的东西。

我将编辑以下文件。

<base href="/">

从

<base href="./">

我会进行修正。
（好像不这样做就无法顺利启动）

安装Electron

cd angular-with-electron
npm install electron --save-dev

当安装完成后，请创建main.js文件。
以下是一些咒语。（我也不太清楚）

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

let win;

function createWindow () {
  // 新規ウインドウ生成
  win = new BrowserWindow({
    width: 800, 
    height: 700
  })


  win.loadURL(`file://${__dirname}/dist/angular-with-electron/index.html`)

  //// 起動時に開発者ツールを開く　（コメントアウトしてます）
  // win.webContents.openDevTools()

  // ウインドウが閉じたときのイベント
  win.on('closed', function () {
    win = null
  })
}

// Electron初期化時にウィンドウ生成
app.on('ready', createWindow)

// すべてのウインドウが閉じたときにElectronを終了する。
app.on('window-all-closed', function () {

  // macOSの場合
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // macOSの場合
  if (win === null) {
    createWindow()
  }
})

我会输入启动命令。

{
// 中略
  "main": "main.js", // 追加
  "scripts": {
// 中略
    "electron": "electron .", // Electronを起動
    "electron-build": "ng build --prod && electron ." // ビルドしてからElectronを起動
  },
//  略
}

如果能做到这一点

npm run electron-build

我能够顺利启动了。

我认为你之后可以像往常一样使用Angular。

以上是我最初的投稿。