Angular + Electron

簡介

Angular 中快速加入 Electron

步驟

1. angular 專案根目錄下輸入

   npm install --save-dev electron
   

2. angular 專案根目錄下新增檔案 app.js

    function createWindow() {
     win = new BrowserWindow({width: 800, height: 800});
     win.loadFile('dist/electron-app/index.html');
    }
   
    app.whenReady().then(() => {
     createWindow()
    })
   

3. 修改 src/index.html

    <base href="./">
   

4. 修改 package.json 加入 "main"

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

5. 修改 .browserslistrc

      not ios_saf 15.2-15.3
      not safari 15.2-15.3 
   

6. 修改 package.json scripts 加入 "electron"

    "scripts": {
      "electron": "ng build && electron ."
    },
   

7. 執行 electron

    npm run electron