Angular - Electron安装

创建Angular应用

ng new angular-electron
cd angular-electron

更新Index.html

更新src/index.html文件，修改/为./

<base href="./">

如果不想改变Angular项目中的文件，则编译Angular项目时指定base-href参数
ng build --base-href "./"

安装Electron

npm install electron --save-dev

如果下载缓慢，可以设置环境变量ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

添加main.js文件

在angular项目根目录下添加main.js文件

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

let win;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 600, 
    height: 600,
    backgroundColor: '#ffffff',
    icon: `file://${__dirname}/dist/assets/logo.png`
  })


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

  //// uncomment below to open the DevTools.
  // win.webContents.openDevTools()

  // Event when the window is closed.
  win.on('closed', function () {
    win = null
  })
}

// Create window on electron intialization
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {

  // On macOS specific close process
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // macOS specific close process
  if (win === null) {
    createWindow()
  }
})

修改package.json文件

{
  "main": "main.js",
  "scripts": {
    "electron": "electron .",
    "electron-build": "ng build --prod \"./dist\" && electron ." 
  }
}

运行

npm run electron-build

安装打包工具

npm install electron-packager -g

打包

electron-packager . --platform=darwin --out "./electron-apps"
electron-packager . --platform=win32 --out "./electron-apps"