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**. \
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 `package.json (root folder)`
- NodeJS's one - Uses NodeJS core module (crypto, fs, util...)
- 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).
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",
"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",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [],
"customWebpackConfig": {
"path": "./angular.webpack.js"
}
},
"configurations": {
"dev": {
"optimization": false,
"outputHashing": "none",
"sourceMap": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
},
"web": {
"optimization": false,
"outputHashing": "none",
"sourceMap": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.web.ts"
}
]
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "angular-electron:build"
},
"configurations": {
"dev": {
"browserTarget": "angular-electron:build:dev"
},
"web": {
"browserTarget": "angular-electron:build:web"
},
"production": {
"browserTarget": "angular-electron:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular-electron:build"
}
},
"test": {
"builder": "@angular-builders/custom-webpack:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills-test.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"scripts": [],
"styles": [
"src/styles.scss"
],
"assets": [
"src/assets"
],
"customWebpackConfig": {
"path": "./angular.webpack.js"
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
}
}
},
"angular-electron-e2e": {
"root": "e2e",
"projectType": "application",
"architect": {
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"e2e/**/*.ts"
]
}
}
}
}
},
"defaultProject": "angular-electron",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"style": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
{
"$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",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [],
"customWebpackConfig": {
"path": "./angular.webpack.js",
"replaceDuplicatePlugins": true
}
},
"configurations": {
"dev": {
"optimization": false,
"outputHashing": "none",
"sourceMap": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
},
"web": {
"optimization": false,
"outputHashing": "none",
"sourceMap": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.web.ts"
}
]
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "angular-electron:build"
},
"configurations": {
"dev": {
"browserTarget": "angular-electron:build:dev"
},
"web": {
"browserTarget": "angular-electron:build:web"
},
"production": {
"browserTarget": "angular-electron:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular-electron:build"
}
},
"test": {
"builder": "@angular-builders/custom-webpack:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills-test.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"scripts": [],
"styles": [
"src/styles.scss"
],
"assets": [
"src/assets"
],
"customWebpackConfig": {
"path": "./angular.webpack.js",
"replaceDuplicatePlugins": true
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
}
}
},
"angular-electron-e2e": {
"root": "e2e",
"projectType": "application",
"architect": {
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"e2e/**/*.ts"
]
}
}
}
}
},
"defaultProject": "angular-electron",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"style": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}

56
angular.webpack.js
View File

@@ -1,24 +1,32 @@
/**
* 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') {
continue;
}
let fileReplacementParts = fileReplacement['with'].split('.');
if (fileReplacementParts.length > 1 && ['web'].indexOf(fileReplacementParts[1]) >= 0) {
config.target = 'web';
}
break;
}
}
return config;
}
//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') {
continue;
}
let fileReplacementParts = fileReplacement['with'].split('.');
if (fileReplacementParts.length > 1 && ['web'].indexOf(fileReplacementParts[1]) >= 0) {
config.target = 'web';
}
break;
}
}
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",
"version": "10.2.1",
"version": "10.3.0",
"lockfileVersion": 1
}

2
app/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "angular-electron",
"version": "10.2.1",
"version": "10.3.0",
"main": "main.js",
"private": true,
"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",
"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",

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.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