Angular & electron

ngElectron.md

1.建立Angular專案

npm i -D electron

2.安裝electron套件(只需要在開發相依使用即可)

npm i -D electron

3.編輯package.json設定main屬性，這邊設定的是npm包的程式進入點，同時也是electron的程式進入點

{
    // something
    "main": "main.js"
    // something
}

4.編輯package.json新增scripts項目，這邊設定的是除錯的啟動指令

{
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
	"ele": "electron ." //使用npm run ele啟動electron
}

5.加入基本的main.js

// Modules to control application life and create native browser window
const {
  app,
  BrowserWindow
} = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow() {
  // 關閉安全性設定
  app.commandLine.appendSwitch('disable-web-security');

  // 建立窗格
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true, //自動隱藏Menu列，按下ALT會再出現
    "node-integration": "iframe", // 這邊都是為了CORS相關設定
    webPreferences: {
      webSecurity: false
    }
  })

  // 關閉預設menu列，開發過程建議不要關掉
  mainWindow.setMenu(null);

  // 自NG Debug網址讀取網頁
  mainWindow.loadURL('http://localhost:4200');
  
  // 設定視窗標題
  mainWindow.setTitle("CLibraryPlus批次上傳精靈 1.0.0");

  // 開啟開發者工具
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

6.啟用Angular與electron環境，分別於不同終端機執行

npm start
npm run ele