fix/ use node 3rd party libraries in renderer process

Author: maximegris

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,12 +1,20 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
     "angular-electron": {
       "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
@@ -27,19 +28,25 @@ function createWindow(): BrowserWindow {
       enableRemoteModule : true // true if you want to run 2e2 test  with Spectron or use remote module in renderer context (ie. Angular)
     },
   });
+  
 
   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": [
         "**/*"
       ]