david.tahir/AngularTicTacToe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Maxime GRIS
2021-11-15 13:18:04 +01:00
parent e07410ba4a
commit e3c0d9f571
8 changed files with 1052 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -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**. \ 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 : 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). 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).

338
angular.json
View File

@@ -1,168 +1,170 @@
{ {
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": { "cli": {
"defaultCollection": "@angular-eslint/schematics" "defaultCollection": "@angular-eslint/schematics"
}, },
"version": 1, "version": 1,
"newProjectRoot": "projects", "newProjectRoot": "projects",
"projects": { "projects": {
"angular-electron": { "angular-electron": {
"root": "", "root": "",
"sourceRoot": "src", "sourceRoot": "src",
"projectType": "application", "projectType": "application",
"schematics": { "schematics": {
"@schematics/angular:application": { "@schematics/angular:application": {
"strict": true "strict": true
} }
}, },
"architect": { "architect": {
"build": { "build": {
"builder": "@angular-builders/custom-webpack:browser", "builder": "@angular-builders/custom-webpack:browser",
"options": { "options": {
"outputPath": "dist", "outputPath": "dist",
"index": "src/index.html", "index": "src/index.html",
"main": "src/main.ts", "main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json", "tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts", "polyfills": "src/polyfills.ts",
"assets": [ "assets": [
"src/favicon.ico", "src/favicon.ico",
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [], "scripts": [],
"customWebpackConfig": { "customWebpackConfig": {
"path": "./angular.webpack.js" "path": "./angular.webpack.js",
} "replaceDuplicatePlugins": true
}, }
"configurations": { },
"dev": { "configurations": {
"optimization": false, "dev": {
"outputHashing": "none", "optimization": false,
"sourceMap": true, "outputHashing": "none",
"namedChunks": false, "sourceMap": true,
"aot": false, "namedChunks": false,
"extractLicenses": true, "aot": false,
"vendorChunk": false, "extractLicenses": true,
"buildOptimizer": false, "vendorChunk": false,
"fileReplacements": [ "buildOptimizer": false,
{ "fileReplacements": [
"replace": "src/environments/environment.ts", {
"with": "src/environments/environment.dev.ts" "replace": "src/environments/environment.ts",
} "with": "src/environments/environment.dev.ts"
] }
}, ]
"web": { },
"optimization": false, "web": {
"outputHashing": "none", "optimization": false,
"sourceMap": true, "outputHashing": "none",
"namedChunks": false, "sourceMap": true,
"aot": false, "namedChunks": false,
"extractLicenses": true, "aot": false,
"vendorChunk": false, "extractLicenses": true,
"buildOptimizer": false, "vendorChunk": false,
"fileReplacements": [ "buildOptimizer": false,
{ "fileReplacements": [
"replace": "src/environments/environment.ts", {
"with": "src/environments/environment.web.ts" "replace": "src/environments/environment.ts",
} "with": "src/environments/environment.web.ts"
] }
}, ]
"production": { },
"optimization": true, "production": {
"outputHashing": "all", "optimization": true,
"sourceMap": false, "outputHashing": "all",
"namedChunks": false, "sourceMap": false,
"aot": true, "namedChunks": false,
"extractLicenses": true, "aot": true,
"vendorChunk": false, "extractLicenses": true,
"buildOptimizer": true, "vendorChunk": false,
"fileReplacements": [ "buildOptimizer": true,
{ "fileReplacements": [
"replace": "src/environments/environment.ts", {
"with": "src/environments/environment.prod.ts" "replace": "src/environments/environment.ts",
} "with": "src/environments/environment.prod.ts"
] }
} ]
} }
}, }
"serve": { },
"builder": "@angular-builders/custom-webpack:dev-server", "serve": {
"options": { "builder": "@angular-builders/custom-webpack:dev-server",
"browserTarget": "angular-electron:build" "options": {
}, "browserTarget": "angular-electron:build"
"configurations": { },
"dev": { "configurations": {
"browserTarget": "angular-electron:build:dev" "dev": {
}, "browserTarget": "angular-electron:build:dev"
"web": { },
"browserTarget": "angular-electron:build:web" "web": {
}, "browserTarget": "angular-electron:build:web"
"production": { },
"browserTarget": "angular-electron:build:production" "production": {
} "browserTarget": "angular-electron:build:production"
} }
}, }
"extract-i18n": { },
"builder": "@angular-devkit/build-angular:extract-i18n", "extract-i18n": {
"options": { "builder": "@angular-devkit/build-angular:extract-i18n",
"browserTarget": "angular-electron:build" "options": {
} "browserTarget": "angular-electron:build"
}, }
"test": { },
"builder": "@angular-builders/custom-webpack:karma", "test": {
"options": { "builder": "@angular-builders/custom-webpack:karma",
"main": "src/test.ts", "options": {
"polyfills": "src/polyfills-test.ts", "main": "src/test.ts",
"tsConfig": "src/tsconfig.spec.json", "polyfills": "src/polyfills-test.ts",
"karmaConfig": "src/karma.conf.js", "tsConfig": "src/tsconfig.spec.json",
"scripts": [], "karmaConfig": "src/karma.conf.js",
"styles": [ "scripts": [],
"src/styles.scss" "styles": [
], "src/styles.scss"
"assets": [ ],
"src/assets" "assets": [
], "src/assets"
"customWebpackConfig": { ],
"path": "./angular.webpack.js" "customWebpackConfig": {
} "path": "./angular.webpack.js",
} "replaceDuplicatePlugins": true
}, }
"lint": { }
"builder": "@angular-eslint/builder:lint", },
"options": { "lint": {
"lintFilePatterns": [ "builder": "@angular-eslint/builder:lint",
"src/**/*.ts", "options": {
"src/**/*.html" "lintFilePatterns": [
] "src/**/*.ts",
} "src/**/*.html"
} ]
} }
}, }
"angular-electron-e2e": { }
"root": "e2e", },
"projectType": "application", "angular-electron-e2e": {
"architect": { "root": "e2e",
"lint": { "projectType": "application",
"builder": "@angular-eslint/builder:lint", "architect": {
"options": { "lint": {
"lintFilePatterns": [ "builder": "@angular-eslint/builder:lint",
"e2e/**/*.ts" "options": {
] "lintFilePatterns": [
} "e2e/**/*.ts"
} ]
} }
} }
}, }
"defaultProject": "angular-electron", }
"schematics": { },
"@schematics/angular:component": { "defaultProject": "angular-electron",
"prefix": "app", "schematics": {
"style": "scss" "@schematics/angular:component": {
}, "prefix": "app",
"@schematics/angular:directive": { "style": "scss"
"prefix": "app" },
} "@schematics/angular:directive": {
} "prefix": "app"
} }
}
}

56
angular.webpack.js
View File

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

2
app/package-lock.json generated
View File

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

2
app/package.json
View File

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

837
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

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

8
src/app/core/services/electron/electron.service.ts
View File

@@ -28,6 +28,14 @@ export class ElectronService {
this.childProcess = window.require('child_process'); this.childProcess = window.require('child_process');
this.fs = window.require('fs'); 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, // If you want to use a NodeJS 3rd party deps in Renderer process,
// ipcRenderer.invoke can serve many common use cases. // ipcRenderer.invoke can serve many common use cases.
// https://www.electronjs.org/docs/latest/api/ipc-renderer#ipcrendererinvokechannel-args // https://www.electronjs.org/docs/latest/api/ipc-renderer#ipcrendererinvokechannel-args