fix/ use node 3rd party libraries in renderer process

README.md

@@ -18,7 +18,7 @@ Bootstrap and package your project with Angular 12 and Electron 13 (Typescript +
 
 Currently runs with:
 
-- Angular v12.0.2
+- Angular v12.0.5
 - Electron v13.0.1
 - Electron Builder v22.10.5
 
@@ -81,16 +81,20 @@ You can disable "Developer Tools" by commenting `win.webContents.openDevTools();
 | app | Electron main process folder (NodeJS) |
 | src | Electron renderer process folder (Web / Angular) |
 
-## Use Electron / NodeJS libraries
+## How to import 3rd party libraries
 
-3rd party libraries used in electron's main process (like an ORM) have to be added in `dependencies` of `app/package.json`.
 This sample project runs in both modes (web and electron). To make this work, **you have to import your dependencies the right way**. \
 
-## Use "web" 3rd party libraries (like angular, material, bootstrap, ...)
+There are two kind of 3rd party libraries :
+- NodeJS's one (like an ORM, Database...)
+    - Used in electron's Main process (app folder) have to be added in `dependencies` of `app/package.json`
+    - Used in electron's Renderer process (src folder) have to be added in `dependencies` of both `app/package.json` and `src/package.json`
 
-3rd party libraries used in electron's renderer process (like angular) have to be added in `dependencies` of `package.json`. \
 Please check `providers/electron.service.ts` to watch how conditional import of libraries has to be done when using NodeJS / 3rd party libraries in renderer context (i.e. Angular).
 
+- Web's one (like bootstrap, material, tailwind...)
+    - It have to be added in `dependencies` of `src/package.json`
+
 ## Add a dependency with ng-add
 
 You may encounter some difficulties with `ng-add` because this project doesn't use the defaults `@angular-builders`. \

angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
@@ -7,6 +10,11 @@
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
@@ -17,6 +25,7 @@
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "assets": [
+              "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
@@ -126,7 +135,7 @@
             "eslintConfig": ".eslintrc.json",
             "lintFilePatterns": [
               "src/**/*.ts",
-              "app/**.ts"
+              "src/**/*.component.html"
             ]
           }
         }

app/main.ts

@@ -1,5 +1,6 @@
 import { app, BrowserWindow, screen } from 'electron';
 import * as path from 'path';
+import * as fs from 'fs';
 import * as url from 'url';
 
 // Initialize remote module
@@ -28,18 +29,24 @@ function createWindow(): BrowserWindow {
     },
   });
   
+
   if (serve) {
-
     win.webContents.openDevTools();
-
     require('electron-reload')(__dirname, {
-      electron: require(`${__dirname}/../node_modules/electron`)
+      electron: require(path.join(__dirname, '/../node_modules/electron'))
     });
     win.loadURL('http://localhost:4200');
-
   } else {
+    // Path when running electron executable
+    let pathIndex = './index.html';
+
+    if (fs.existsSync(path.join(__dirname, '../dist/index.html'))) {
+       // Path when running electron in local folder
+      pathIndex = '../dist/index.html';
+    }
+
     win.loadURL(url.format({
-      pathname: path.join(__dirname, '../dist/index.html'),
+      pathname: path.join(__dirname, pathIndex),
       protocol: 'file:',
       slashes: true
     }));

electron-builder.json

@@ -1,4 +1,5 @@
 {
+  "asar": false,
   "directories": {
     "output": "release/"
   },
@@ -12,7 +13,7 @@
   "extraResources": [
     {
       "from": "dist",
-      "to": "dist",
+      "to": "app",
       "filter": [
         "**/*"
       ]

package.json

@@ -41,30 +41,29 @@
     "lint": "ng lint"
   },
   "dependencies": {
-    "@angular/common": "12.0.2",
+    "@angular/common": "12.0.5",
-    "@angular/compiler": "12.0.2",
+    "@angular/compiler": "12.0.5",
-    "@angular/compiler-cli": "12.0.2",
+    "@angular/core": "12.0.5",
-    "@angular/core": "12.0.2",
+    "@angular/forms": "12.0.5",
-    "@angular/forms": "12.0.2",
+    "@angular/language-service": "12.0.5",
-    "@angular/language-service": "12.0.2",
+    "@angular/platform-browser": "12.0.5",
-    "@angular/platform-browser": "12.0.2",
+    "@angular/platform-browser-dynamic": "12.0.5",
-    "@angular/platform-browser-dynamic": "12.0.2",
+    "@angular/router": "12.0.5",
-    "@angular/router": "12.0.2",
     "@electron/remote": "1.0.4",
-    "core-js": "3.6.5",
     "rxjs": "6.6.6",
     "tslib": "2.1.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "12.0.0",
-    "@angular-devkit/build-angular": "12.0.2",
+    "@angular-devkit/build-angular": "12.0.5",
-    "@angular-eslint/builder": "12.0.0",
+    "@angular-eslint/builder": "12.1.0",
-    "@angular-eslint/eslint-plugin": "12.0.0",
+    "@angular-eslint/eslint-plugin": "12.1.0",
-    "@angular-eslint/eslint-plugin-template": "12.0.0",
+    "@angular-eslint/eslint-plugin-template": "12.1.0",
-    "@angular-eslint/schematics": "12.0.0",
+    "@angular-eslint/schematics": "12.1.0",
-    "@angular-eslint/template-parser": "12.0.0",
+    "@angular-eslint/template-parser": "12.1.0",
-    "@angular/cli": "12.0.2",
+    "@angular/cli": "12.0.5",
+    "@angular/compiler-cli": "12.0.5",
     "@ngx-translate/core": "13.0.0",
     "@ngx-translate/http-loader": "6.0.0",
     "@types/jasmine": "3.7.6",
@@ -72,7 +71,6 @@
     "@types/mocha": "8.2.2",
     "@types/node": "15.6.1",
     "@typescript-eslint/eslint-plugin": "4.25.0",
-    "@typescript-eslint/eslint-plugin-tslint": "4.25.0",
     "@typescript-eslint/parser": "4.25.0",
     "chai": "4.3.4",
     "conventional-changelog-cli": "2.1.1",

src/app/core/services/electron/electron.service.ts

@@ -27,12 +27,13 @@ export class ElectronService {
       this.ipcRenderer = window.require('electron').ipcRenderer;
       this.webFrame = window.require('electron').webFrame;
 
-      // If you want to use remote object in renderer process, please set enableRemoteModule to true in main.ts
-      // this.remote = window.require('@electron/remote');
-      // console.log('remote - globalShortcut', this.remote.globalShortcut);
-
       this.childProcess = window.require('child_process');
       this.fs = window.require('fs');
+
+      // If you want to use a NodeJS 3rd party deps in Renderer process (like @electron/remote), it must be declared in dependencies of both package.json (in root and app folders)
+      // If you want to use remote object in renderer process, please set enableRemoteModule to true in main.ts
+      this.remote = window.require('@electron/remote');
+      console.log('remote - globalShortcut', this.remote.globalShortcut);
     }
   }
 }

src/app/detail/detail.component.ts

@@ -9,6 +9,8 @@ export class DetailComponent implements OnInit {
 
   constructor() { }
 
-  ngOnInit(): void { }
+  ngOnInit(): void {
+    console.log("DetailComponent INIT");
+   }
 
 }

src/app/home/home.component.ts

@@ -10,6 +10,8 @@ export class HomeComponent implements OnInit {
 
   constructor(private router: Router) { }
 
-  ngOnInit(): void { }
+  ngOnInit(): void { 
+    console.log("HomeComponent INIT");
+  }
 
 }

src/app/shared/components/page-not-found/page-not-found.component.ts

@@ -8,5 +8,7 @@ import { Component, OnInit } from '@angular/core';
 export class PageNotFoundComponent implements OnInit {
   constructor() {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    console.log("PageNotFoundComponent INIT");
+  }
 }