Optimierungen an Angular-Electron Application

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