先介紹下electron,\

Electron.js 是一個流行的平臺，用於使用 JavaScript，HTML 和 CSS 構建適用於 Windows，Linux 和 macOS 的跨平臺桌面應用程式。

需要了解typescript 和 angular

需要先安裝node.js 和npm

步驟如下：

首先，先構建一個單純的angular應用，可以正常執行

然後,

先安裝electron

npm install--save-dev electron

接下來在根目錄建立一個main.js 檔案並新增一下程式碼

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

const url = require("url");

const path = require("path");

let mainWindow

function createWindow () {

　　mainWindow = new BrowserWindow({

　　　　width: 800,

　　　　height: 600,

　　　　webPreferences: { nodeIntegration: true }

　　})

　　mainWindow.loadURL(

　　　　url.format({

　　　　　　pathname: path.join(__dirname, `/dist/index.html`),

　　　　　　protocol: "file:", slashes: true }) );

　　　　　　// Open the DevTools.

　　　　　　 mainWindow.webContents.openDevTools()

　　　　　　mainWindow.on('closed', function () {

　　　　　　　　mainWindow = null

　　　　　　})

　　}

　　app.on('ready', createWindow)

　　app.on('window-all-closed',

　　　　function () {

　　　　　　if (process.platform !== 'darwin') app.quit() }

　　　　)

　　　app.on('activate', function () {

　　　　if (mainWindow === null) 　　

　　　　　　createWindow()

　　　　})
此程式碼只是建立一個GUI視窗，並在我們構建Angular應用程式後加載該index.html 檔案dist夾下應該可用的檔案

開啟package.json,新增“main":"main.js"為主要入口點

接下來，需要在構建 Angular 專案後啟動 Electron

ng build --base-href ./命令的一部分構建 Angular 應用程式並將基本 href 設定為./。

electron .命令的一部分從當前目錄啟動我們的 Electron 應用程式。

現在執行npm run start:electron .將會啟動electron 應用程式

GUI 視窗將開啟，在控制檯中，您將看到不允許載入本地資源：/electron-angular-demo/dist/index.html錯誤。

Electron 無法從 dist 資料夾載入檔案，因為它根本不存在。如果您檢視專案的資料夾，您將看到 Angular CLI 在 dist/electron-angular-demo 資料夾而不僅僅是 dist 資料夾中構建您的應用程式

在我們的main.js檔案中，我們告訴 Electronindex.html在 dist 沒有子資料夾的資料夾中查詢檔案：

__dirname指的是我們執行 Electron 的當前資料夾。

我們使用該 path.join()方法將當前資料夾的/dist/index.html 路徑與路徑連線起來。

可以更改路徑的第二部分，/dist/electron-angular-demo/index.html 或者更好的是，更改 Angular 配置以輸出檔案 dist 夾中的檔案而不使用子資料夾。
開啟 angular.json 檔案，找到 projects → architect → build → options → outputPath 金鑰並將其值更改 dist/electron-angular-demo 為 dist：

再次執行 npm run start:electron

該文章來源於https://ld246.com/article/1559209582761