Basic Angular and Electron working

angular.json

@@ -36,12 +36,12 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/Bridge",
+            "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
+            "tsConfig": "tsconfig.angular.json",
-            "aot": false,
+            "watch": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
@@ -67,19 +67,7 @@
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true,
+              "buildOptimizer": true
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
             }
           }
         },

package.json

@@ -1,11 +1,14 @@
 {
   "name": "bridge",
   "version": "0.0.0",
+  "main": "dist/electron/main.js",
   "scripts": {
-    "ng": "ng",
+    "start": "run-p serve:angular serve:electron",
-    "start": "ng serve",
+    "serve:electron": "wait-on http-get://localhost:4200/ && tsc -p tsconfig.electron.json && electron . --serve",
-    "build": "ng build",
+    "serve:angular": "ng serve",
-    "lint": "ng lint"
+    "lint": "ng lint",
+    "clean": "rimraf dist",
+    "prod:windows": ""
   },
   "private": true,
   "dependencies": {
@@ -27,6 +30,11 @@
     "@angular/compiler-cli": "~8.2.14",
     "@angular/language-service": "~8.2.14",
     "@types/node": "~8.9.4",
+    "electron": "^7.1.11",
+    "npm-run-all": "^4.1.5",
+    "wait-on": "^4.0.0",
+    "electron-reload": "^1.5.0",
+    "rimraf": "^3.0.1",
     "ts-node": "~7.0.0",
     "tslint": "~5.15.0",
     "typescript": "~3.5.3"

src/electron/main.ts

@@ -0,0 +1,121 @@
+import { app, BrowserWindow, screen, ipcMain } from 'electron'
+import * as path from 'path'
+import * as url from 'url'
+
+// IPC Handlers
+// import { getIPCHandlers } from './src/assets/electron/shared/IPCHandler'
+
+let mainWindow: BrowserWindow
+const args = process.argv.slice(1)
+const isDevBuild = args.some(val => val == '--serve')
+
+restrictToSingleInstance()
+handleOSXWindowClosed()
+app.on('ready', createBridgeWindow)
+
+/**
+ * Only allow a single Bridge window to be open at any one time.
+ * If this is attempted, restore the open window instead.
+ */
+function restrictToSingleInstance() {
+  const isFirstBridgeInstance = app.requestSingleInstanceLock()
+  if (!isFirstBridgeInstance) app.quit()
+  app.on('second-instance', () => {
+    if (mainWindow != undefined) {
+      if (mainWindow.isMinimized()) mainWindow.restore()
+      mainWindow.focus()
+    }
+  })
+}
+
+/**
+ * Standard OSX window functionality is to
+ * minimize when closed and maximize when opened.
+ */
+function handleOSXWindowClosed() {
+  app.on('window-all-closed', () => {
+    if (process.platform != 'darwin') {
+      app.quit()
+    }
+  })
+
+  app.on('activate', () => {
+    if (mainWindow == undefined) {
+      createBridgeWindow()
+    }
+  })
+}
+
+/**
+ * Launches and initializes Bridge's main window.
+ */
+function createBridgeWindow() {
+
+  // Create the browser window
+  mainWindow = createBrowserWindow()
+
+  mainWindow.maximize()
+
+  // Don't use a system menu
+  mainWindow.setMenu(null)
+
+  // IPC handlers
+  // getIPCHandlers().map(handler => ipcMain.handle(handler.event, (_event, ...args) => handler.handler(args[0])))
+
+  // Load angular app
+  mainWindow.loadURL(getLoadUrl())
+
+  if (isDevBuild) {
+   setUpDevTools()
+  }
+
+  mainWindow.on('closed', () => {
+    mainWindow = null // Dereference mainWindow when the window is closed
+  })
+}
+
+/**
+ * Initialize a BrowserWindow object with initial parameters
+ */
+function createBrowserWindow() {
+  const targetWindowSize = screen.getPrimaryDisplay().workAreaSize
+
+  return new BrowserWindow({
+    x: 0,
+    y: 0,
+    width: targetWindowSize.width,
+    height: targetWindowSize.height,
+    frame: false,
+    title: 'Bridge',
+    webPreferences: {
+      nodeIntegration: true,
+      allowRunningInsecureContent: (isDevBuild) ? true : false,
+      textAreasAreResizable: false
+    },
+    simpleFullscreen: true,
+    fullscreenable: false
+  })
+}
+
+/**
+ * Load from localhost during development; load from index.html in production
+ */
+function getLoadUrl() {
+  return url.format({
+    protocol: isDevBuild ? 'http:' : 'file:',
+    pathname: isDevBuild ? '//localhost:4200/' : path.join(__dirname, 'index.html'),
+    slashes: true
+  })
+}
+
+/**
+ * Automatically reload the electron process on changes, and open the dev tools
+ */
+function setUpDevTools() {
+  require('electron-reload')(__dirname, {
+    electron: require(`${__dirname}/../../node_modules/electron`)
+  })
+  mainWindow.loadURL('http://localhost:4200')
+
+  mainWindow.webContents.openDevTools()
+}

tsconfig.angular.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "src/**/*.ts"
+  ],
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "types": []
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}

tsconfig.app.json

@@ -1,17 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/test.ts"
-  ]
-}

tsconfig.electron.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "src/electron/**/*.ts"
+  ],
+  "compilerOptions": {
+    "outDir": "dist/electron"
+  }
+}

tsconfig.json

@@ -2,25 +2,25 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "ES5",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
     "lib": [
-      "es2018",
+      "es2017",
+      "es2016",
+      "es2015",
       "dom"
-    ]
+    ],
+
+    "outDir": "dist/electron"
   },
-  "angularCompilerOptions": {
+  "include": [
-    "fullTemplateTypeCheck": true,
+    "src/electron/**/*.ts"
-    "strictInjectionParameters": true
+  ]
-  }
 }