fix/Polyfill Node.js core modules in Webpack (5+)

README.md

@@ -85,9 +85,8 @@ You can disable "Developer Tools" by commenting `win.webContents.openDevTools();
 This sample project runs in both modes (web and electron). To make this work, **you have to import your dependencies the right way**. \
 
 There are two kind of 3rd party libraries :
-- NodeJS's one (like an ORM, Database...)
+- NodeJS's one - Uses NodeJS core module (crypto, fs, util...)
-    - Used in electron's Main process (app folder) have to be added in `dependencies` of `app/package.json`
+    - I suggest you add this kind of 3rd party library in `dependencies` of both `app/package.json` and `package.json (root folder)` in order to make it work in both Electron's Main process (app folder) and Electron's Renderer process (src folder).
-    - Used in electron's Renderer process (src folder) have to be added in `dependencies` of both `app/package.json` and `package.json (root folder)`
 
 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).
 

angular.json

@@ -33,7 +33,8 @@
             ],
             "scripts": [],
             "customWebpackConfig": {
-              "path": "./angular.webpack.js"
+              "path": "./angular.webpack.js",
+              "replaceDuplicatePlugins": true
             }
           },
           "configurations": {
@@ -125,7 +126,8 @@
               "src/assets"
             ],
             "customWebpackConfig": {
-              "path": "./angular.webpack.js"
+              "path": "./angular.webpack.js",
+              "replaceDuplicatePlugins": true
             }
           }
         },

angular.webpack.js

@@ -1,11 +1,12 @@
+//Polyfill Node.js core modules in Webpack. This module is only needed for webpack 5+.
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+
 /**
  * Custom angular webpack configuration
  */
-
 module.exports = (config, options) => {
     config.target = 'electron-renderer';
 
-
     if (options.fileReplacements) {
         for(let fileReplacement of options.fileReplacements) {
             if (fileReplacement.replace !== 'src/environments/environment.ts') {
@@ -20,5 +21,12 @@ module.exports = (config, options) => {
         }
     }
 
+    config.plugins = [
+        ...config.plugins,
+        new NodePolyfillPlugin({
+			excludeAliases: ["console"]
+		})
+    ];
+
     return config;
 }

app/package-lock.json

@@ -1,5 +1,5 @@
 {
   "name": "angular-electron",
-  "version": "10.2.1",
+  "version": "10.3.0",
   "lockfileVersion": 1
 }

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-electron",
-  "version": "10.2.1",
+  "version": "10.3.0",
   "main": "main.js",
   "private": true,
   "dependencies": {}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-electron",
-  "version": "10.2.1",
+  "version": "10.3.0",
   "description": "Angular 12 with Electron (Typescript + SASS + Hot Reload)",
   "homepage": "https://github.com/maximegris/angular-electron",
   "author": {
@@ -89,6 +89,7 @@
     "karma-jasmine": "4.0.1",
     "karma-jasmine-html-reporter": "1.7.0",
     "nan": "2.14.2",
+    "node-polyfill-webpack-plugin": "1.1.4",
     "npm-run-all": "4.1.5",
     "playwright": "1.16.3",
     "ts-node": "10.1.0",

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

@@ -28,6 +28,14 @@ export class ElectronService {
       this.childProcess = window.require('child_process');
       this.fs = window.require('fs');
 
+      // Notes :
+      // * A NodeJS's dependency imported with 'window.require' MUST BE present in `dependencies` of both `app/package.json`
+      // and `package.json (root folder)` in order to make it work here in Electron's Renderer process (src folder)
+      // because it will loaded at runtime by Electron.
+      // * A NodeJS's dependency imported with TS module import (ex: import { Dropbox } from 'dropbox') CAN only be present
+      // in `dependencies` of `package.json (root folder)` because it is loaded during build phase and does not need to be
+      // in the final bundle. Reminder : only if not used in Electron's Main process (app folder)
+
       // If you want to use a NodeJS 3rd party deps in Renderer process,
       // ipcRenderer.invoke can serve many common use cases.
       // https://www.electronjs.org/docs/latest/api/ipc-renderer#ipcrendererinvokechannel-args