Nachdem ich vorgestern das zusammenführen von Angular und Electron beschrieben habe, habe ich noch einige Optimierungen vorgenommen.
Als erstes habe ich aus der app.js
für das Angular-Framework eine app.ts
Typescript Datei gemacht, da mir das Typ orientierte Programmieren doch etwas schlüssiger ist, und ich außerdem das Intelisense mag. In diesem Zuge habe ich auch einen Ordner src/electron
angelegt, in den diese Datei gewandert ist, um das Programm etwas besser strukturiert zu haben.
Die neue src/electron/app.ts
sieht nun so aus:
import { app, BrowserWindow, ipcMain } from "electron"; import * as path from "path" import * as url from "url" let appWindow :Electron.BrowserWindow | null function initWindow() :void { appWindow = new BrowserWindow({ width: 1000, height: 800, webPreferences: { nodeIntegration: true } }) // Electron Build Path appWindow.loadFile('./dist/index.html') // Initialize the DevTools. //appWindow.webContents.openDevTools() appWindow.on('closed', function () { appWindow = null }) } app.on('ready', initWindow) // Close 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 () { if (appWindow === null) { initWindow() } }) ipcMain.on('ping', (event,arg) => { console.log('pong'); event.returnValue = "pong" }) ipcMain.on('asping', (event,arg) => { console.log('aspong'); event.reply('aspong', "aspong") })
Anschließend habe ich noch eine die NPM-Scripte in der package.json
angepasst, sodass diese das Typescript in ein Javascript umwandeln.
.... "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "build-electron": "ng build --base-href ./ && tsc --build ./src/electron/tsconfig.json", "electron": "npm run build-electron && ./node_modules/.bin/electron .", "pack": "electron-builder --dir", "dist": "ng build --prod --base-href ./ && tsc --build ./src/electron/tsconfig.json && electron-builder -m -w -l" }, ....
Außerdem habe ich noch das Paket ngx-electron
installiert, welches für die IPC-Komunikation zwischen dem Frontend und dem Backend zu empfehlen ist.
Wer mag kann zusätzlich noch eine build/icon.png
hinzufügen, sodass in dem Build eine entsprechende