Skip to content

Commit e3c0d9f

Browse files
maximegrismaximegris
committed
fix/Polyfill Node.js core modules in Webpack (5+)
1 parent e07410b commit e3c0d9f

File tree

8 files changed

+1052
-199
lines changed

8 files changed

+1052
-199
lines changed

‎README.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,8 @@ You can disable "Developer Tools" by commenting `win.webContents.openDevTools();
8585
This sample project runs in both modes (web and electron). To make this work, **you have to import your dependencies the right way**. \
8686

8787
There are two kind of 3rd party libraries :
88-
- NodeJS's one (like an ORM, Database...)
89-
- Used in electron's Main process (app folder) have to be added in `dependencies` of `app/package.json`
90-
- Used in electron's Renderer process (src folder) have to be added in `dependencies` of both `app/package.json` and `package.json (root folder)`
88+
- NodeJS's one - Uses NodeJS core module (crypto, fs, util...)
89+
- 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).
9190

9291
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).
9392

‎angular.json

+170-168
Original file line numberDiff line numberDiff line change
@@ -1,168 +1,170 @@
1-
{
2-
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3-
"cli": {
4-
"defaultCollection": "@angular-eslint/schematics"
5-
},
6-
"version": 1,
7-
"newProjectRoot": "projects",
8-
"projects": {
9-
"angular-electron": {
10-
"root": "",
11-
"sourceRoot": "src",
12-
"projectType": "application",
13-
"schematics": {
14-
"@schematics/angular:application": {
15-
"strict": true
16-
}
17-
},
18-
"architect": {
19-
"build": {
20-
"builder": "@angular-builders/custom-webpack:browser",
21-
"options": {
22-
"outputPath": "dist",
23-
"index": "src/index.html",
24-
"main": "src/main.ts",
25-
"tsConfig": "src/tsconfig.app.json",
26-
"polyfills": "src/polyfills.ts",
27-
"assets": [
28-
"src/favicon.ico",
29-
"src/assets"
30-
],
31-
"styles": [
32-
"src/styles.scss"
33-
],
34-
"scripts": [],
35-
"customWebpackConfig": {
36-
"path": "./angular.webpack.js"
37-
}
38-
},
39-
"configurations": {
40-
"dev": {
41-
"optimization": false,
42-
"outputHashing": "none",
43-
"sourceMap": true,
44-
"namedChunks": false,
45-
"aot": false,
46-
"extractLicenses": true,
47-
"vendorChunk": false,
48-
"buildOptimizer": false,
49-
"fileReplacements": [
50-
{
51-
"replace": "src/environments/environment.ts",
52-
"with": "src/environments/environment.dev.ts"
53-
}
54-
]
55-
},
56-
"web": {
57-
"optimization": false,
58-
"outputHashing": "none",
59-
"sourceMap": true,
60-
"namedChunks": false,
61-
"aot": false,
62-
"extractLicenses": true,
63-
"vendorChunk": false,
64-
"buildOptimizer": false,
65-
"fileReplacements": [
66-
{
67-
"replace": "src/environments/environment.ts",
68-
"with": "src/environments/environment.web.ts"
69-
}
70-
]
71-
},
72-
"production": {
73-
"optimization": true,
74-
"outputHashing": "all",
75-
"sourceMap": false,
76-
"namedChunks": false,
77-
"aot": true,
78-
"extractLicenses": true,
79-
"vendorChunk": false,
80-
"buildOptimizer": true,
81-
"fileReplacements": [
82-
{
83-
"replace": "src/environments/environment.ts",
84-
"with": "src/environments/environment.prod.ts"
85-
}
86-
]
87-
}
88-
}
89-
},
90-
"serve": {
91-
"builder": "@angular-builders/custom-webpack:dev-server",
92-
"options": {
93-
"browserTarget": "angular-electron:build"
94-
},
95-
"configurations": {
96-
"dev": {
97-
"browserTarget": "angular-electron:build:dev"
98-
},
99-
"web": {
100-
"browserTarget": "angular-electron:build:web"
101-
},
102-
"production": {
103-
"browserTarget": "angular-electron:build:production"
104-
}
105-
}
106-
},
107-
"extract-i18n": {
108-
"builder": "@angular-devkit/build-angular:extract-i18n",
109-
"options": {
110-
"browserTarget": "angular-electron:build"
111-
}
112-
},
113-
"test": {
114-
"builder": "@angular-builders/custom-webpack:karma",
115-
"options": {
116-
"main": "src/test.ts",
117-
"polyfills": "src/polyfills-test.ts",
118-
"tsConfig": "src/tsconfig.spec.json",
119-
"karmaConfig": "src/karma.conf.js",
120-
"scripts": [],
121-
"styles": [
122-
"src/styles.scss"
123-
],
124-
"assets": [
125-
"src/assets"
126-
],
127-
"customWebpackConfig": {
128-
"path": "./angular.webpack.js"
129-
}
130-
}
131-
},
132-
"lint": {
133-
"builder": "@angular-eslint/builder:lint",
134-
"options": {
135-
"lintFilePatterns": [
136-
"src/**/*.ts",
137-
"src/**/*.html"
138-
]
139-
}
140-
}
141-
}
142-
},
143-
"angular-electron-e2e": {
144-
"root": "e2e",
145-
"projectType": "application",
146-
"architect": {
147-
"lint": {
148-
"builder": "@angular-eslint/builder:lint",
149-
"options": {
150-
"lintFilePatterns": [
151-
"e2e/**/*.ts"
152-
]
153-
}
154-
}
155-
}
156-
}
157-
},
158-
"defaultProject": "angular-electron",
159-
"schematics": {
160-
"@schematics/angular:component": {
161-
"prefix": "app",
162-
"style": "scss"
163-
},
164-
"@schematics/angular:directive": {
165-
"prefix": "app"
166-
}
167-
}
168-
}
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"cli": {
4+
"defaultCollection": "@angular-eslint/schematics"
5+
},
6+
"version": 1,
7+
"newProjectRoot": "projects",
8+
"projects": {
9+
"angular-electron": {
10+
"root": "",
11+
"sourceRoot": "src",
12+
"projectType": "application",
13+
"schematics": {
14+
"@schematics/angular:application": {
15+
"strict": true
16+
}
17+
},
18+
"architect": {
19+
"build": {
20+
"builder": "@angular-builders/custom-webpack:browser",
21+
"options": {
22+
"outputPath": "dist",
23+
"index": "src/index.html",
24+
"main": "src/main.ts",
25+
"tsConfig": "src/tsconfig.app.json",
26+
"polyfills": "src/polyfills.ts",
27+
"assets": [
28+
"src/favicon.ico",
29+
"src/assets"
30+
],
31+
"styles": [
32+
"src/styles.scss"
33+
],
34+
"scripts": [],
35+
"customWebpackConfig": {
36+
"path": "./angular.webpack.js",
37+
"replaceDuplicatePlugins": true
38+
}
39+
},
40+
"configurations": {
41+
"dev": {
42+
"optimization": false,
43+
"outputHashing": "none",
44+
"sourceMap": true,
45+
"namedChunks": false,
46+
"aot": false,
47+
"extractLicenses": true,
48+
"vendorChunk": false,
49+
"buildOptimizer": false,
50+
"fileReplacements": [
51+
{
52+
"replace": "src/environments/environment.ts",
53+
"with": "src/environments/environment.dev.ts"
54+
}
55+
]
56+
},
57+
"web": {
58+
"optimization": false,
59+
"outputHashing": "none",
60+
"sourceMap": true,
61+
"namedChunks": false,
62+
"aot": false,
63+
"extractLicenses": true,
64+
"vendorChunk": false,
65+
"buildOptimizer": false,
66+
"fileReplacements": [
67+
{
68+
"replace": "src/environments/environment.ts",
69+
"with": "src/environments/environment.web.ts"
70+
}
71+
]
72+
},
73+
"production": {
74+
"optimization": true,
75+
"outputHashing": "all",
76+
"sourceMap": false,
77+
"namedChunks": false,
78+
"aot": true,
79+
"extractLicenses": true,
80+
"vendorChunk": false,
81+
"buildOptimizer": true,
82+
"fileReplacements": [
83+
{
84+
"replace": "src/environments/environment.ts",
85+
"with": "src/environments/environment.prod.ts"
86+
}
87+
]
88+
}
89+
}
90+
},
91+
"serve": {
92+
"builder": "@angular-builders/custom-webpack:dev-server",
93+
"options": {
94+
"browserTarget": "angular-electron:build"
95+
},
96+
"configurations": {
97+
"dev": {
98+
"browserTarget": "angular-electron:build:dev"
99+
},
100+
"web": {
101+
"browserTarget": "angular-electron:build:web"
102+
},
103+
"production": {
104+
"browserTarget": "angular-electron:build:production"
105+
}
106+
}
107+
},
108+
"extract-i18n": {
109+
"builder": "@angular-devkit/build-angular:extract-i18n",
110+
"options": {
111+
"browserTarget": "angular-electron:build"
112+
}
113+
},
114+
"test": {
115+
"builder": "@angular-builders/custom-webpack:karma",
116+
"options": {
117+
"main": "src/test.ts",
118+
"polyfills": "src/polyfills-test.ts",
119+
"tsConfig": "src/tsconfig.spec.json",
120+
"karmaConfig": "src/karma.conf.js",
121+
"scripts": [],
122+
"styles": [
123+
"src/styles.scss"
124+
],
125+
"assets": [
126+
"src/assets"
127+
],
128+
"customWebpackConfig": {
129+
"path": "./angular.webpack.js",
130+
"replaceDuplicatePlugins": true
131+
}
132+
}
133+
},
134+
"lint": {
135+
"builder": "@angular-eslint/builder:lint",
136+
"options": {
137+
"lintFilePatterns": [
138+
"src/**/*.ts",
139+
"src/**/*.html"
140+
]
141+
}
142+
}
143+
}
144+
},
145+
"angular-electron-e2e": {
146+
"root": "e2e",
147+
"projectType": "application",
148+
"architect": {
149+
"lint": {
150+
"builder": "@angular-eslint/builder:lint",
151+
"options": {
152+
"lintFilePatterns": [
153+
"e2e/**/*.ts"
154+
]
155+
}
156+
}
157+
}
158+
}
159+
},
160+
"defaultProject": "angular-electron",
161+
"schematics": {
162+
"@schematics/angular:component": {
163+
"prefix": "app",
164+
"style": "scss"
165+
},
166+
"@schematics/angular:directive": {
167+
"prefix": "app"
168+
}
169+
}
170+
}

0 commit comments

Comments
 (0)