Skip to content

Commit fcd9108

Browse files
M4R1KUM4R1KU
committed
feat: add 2 sophisticated microfrontends that use different dependencies
1 parent 7f22553 commit fcd9108

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+2576
-3592
lines changed

‎angular.json

Lines changed: 121 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,12 @@
1515
"prefix": "app",
1616
"architect": {
1717
"build": {
18-
"builder": "@angular-devkit/build-angular:browser",
18+
"builder": "@angular-builders/custom-webpack:browser",
1919
"options": {
20-
"outputPath": "dist/angular-module-federation",
20+
"customWebpackConfig": {
21+
"path": "extra-webpack.config.ts"
22+
},
23+
"outputPath": "dist/shell",
2124
"index": "src/index.html",
2225
"main": "src/main.ts",
2326
"polyfills": "src/polyfills.ts",
@@ -63,9 +66,11 @@
6366
}
6467
},
6568
"serve": {
66-
"builder": "@angular-devkit/build-angular:dev-server",
69+
"builder": "@angular-builders/custom-webpack:dev-server",
6770
"options": {
68-
"browserTarget": "angular-module-federation:build"
71+
"browserTarget": "angular-module-federation:build",
72+
"port": 5000,
73+
"proxyConfig": "proxy.conf.js"
6974
},
7075
"configurations": {
7176
"production": {
@@ -135,8 +140,11 @@
135140
"prefix": "app",
136141
"architect": {
137142
"build": {
138-
"builder": "@angular-devkit/build-angular:browser",
143+
"builder": "@angular-builders/custom-webpack:browser",
139144
"options": {
145+
"customWebpackConfig": {
146+
"path": "projects/mf1/extra-webpack.config.ts"
147+
},
140148
"outputPath": "dist/mf1",
141149
"index": "projects/mf1/src/index.html",
142150
"main": "projects/mf1/src/main.ts",
@@ -183,9 +191,10 @@
183191
}
184192
},
185193
"serve": {
186-
"builder": "@angular-devkit/build-angular:dev-server",
194+
"builder": "@angular-builders/custom-webpack:dev-server",
187195
"options": {
188-
"browserTarget": "mf1:build"
196+
"browserTarget": "mf1:build",
197+
"port": 3000
189198
},
190199
"configurations": {
191200
"production": {
@@ -228,18 +237,118 @@
228237
"**/node_modules/**"
229238
]
230239
}
240+
}
241+
}
242+
},
243+
"mf2": {
244+
"projectType": "application",
245+
"schematics": {
246+
"@schematics/angular:component": {
247+
"style": "scss"
248+
}
249+
},
250+
"root": "projects/mf2",
251+
"sourceRoot": "projects/mf2/src",
252+
"prefix": "app",
253+
"architect": {
254+
"build": {
255+
"builder": "@angular-builders/custom-webpack:browser",
256+
"options": {
257+
"customWebpackConfig": {
258+
"path": "projects/mf2/extra-webpack.config.ts"
259+
},
260+
"outputPath": "dist/mf2",
261+
"index": "projects/mf2/src/index.html",
262+
"main": "projects/mf2/src/main.ts",
263+
"polyfills": "projects/mf2/src/polyfills.ts",
264+
"tsConfig": "projects/mf2/tsconfig.app.json",
265+
"aot": true,
266+
"assets": [
267+
"projects/mf2/src/favicon.ico",
268+
"projects/mf2/src/assets"
269+
],
270+
"styles": [
271+
"projects/mf2/src/styles.scss"
272+
],
273+
"scripts": []
274+
},
275+
"configurations": {
276+
"production": {
277+
"fileReplacements": [
278+
{
279+
"replace": "projects/mf2/src/environments/environment.ts",
280+
"with": "projects/mf2/src/environments/environment.prod.ts"
281+
}
282+
],
283+
"optimization": true,
284+
"outputHashing": "all",
285+
"sourceMap": false,
286+
"namedChunks": false,
287+
"extractLicenses": true,
288+
"vendorChunk": false,
289+
"buildOptimizer": true,
290+
"budgets": [
291+
{
292+
"type": "initial",
293+
"maximumWarning": "2mb",
294+
"maximumError": "5mb"
295+
},
296+
{
297+
"type": "anyComponentStyle",
298+
"maximumWarning": "6kb",
299+
"maximumError": "10kb"
300+
}
301+
]
302+
}
303+
}
231304
},
232-
"e2e": {
233-
"builder": "@angular-devkit/build-angular:protractor",
305+
"serve": {
306+
"builder": "@angular-builders/custom-webpack:dev-server",
234307
"options": {
235-
"protractorConfig": "projects/mf1/e2e/protractor.conf.js",
236-
"devServerTarget": "mf1:serve"
308+
"browserTarget": "mf2:build",
309+
"port": 4000
237310
},
238311
"configurations": {
239312
"production": {
240-
"devServerTarget": "mf1:serve:production"
313+
"browserTarget": "mf2:build:production"
241314
}
242315
}
316+
},
317+
"extract-i18n": {
318+
"builder": "@angular-devkit/build-angular:extract-i18n",
319+
"options": {
320+
"browserTarget": "mf2:build"
321+
}
322+
},
323+
"test": {
324+
"builder": "@angular-devkit/build-angular:karma",
325+
"options": {
326+
"main": "projects/mf2/src/test.ts",
327+
"polyfills": "projects/mf2/src/polyfills.ts",
328+
"tsConfig": "projects/mf2/tsconfig.spec.json",
329+
"karmaConfig": "projects/mf2/karma.conf.js",
330+
"assets": [
331+
"projects/mf2/src/favicon.ico",
332+
"projects/mf2/src/assets"
333+
],
334+
"styles": [
335+
"projects/mf2/src/styles.scss"
336+
],
337+
"scripts": []
338+
}
339+
},
340+
"lint": {
341+
"builder": "@angular-devkit/build-angular:tslint",
342+
"options": {
343+
"tsConfig": [
344+
"projects/mf2/tsconfig.app.json",
345+
"projects/mf2/tsconfig.spec.json",
346+
"projects/mf2/e2e/tsconfig.json"
347+
],
348+
"exclude": [
349+
"**/node_modules/**"
350+
]
351+
}
243352
}
244353
}
245354
}

‎extra-webpack.config.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import * as webpack from 'webpack';
2+
import * as ModuleFederationPlugin from 'webpack/lib/container/ModuleFederationPlugin';
3+
4+
export default {
5+
optimization: {
6+
runtimeChunk: false,
7+
},
8+
plugins: [
9+
new ModuleFederationPlugin({
10+
remotes: {
11+
mfe1: 'mfe1'
12+
},
13+
shared: {
14+
'@angular/core': {
15+
eager: true
16+
},
17+
'@angular/common': {
18+
eager: true
19+
},
20+
'@angular/common/': {
21+
eager: true
22+
},
23+
'@angular/router': {
24+
eager: true
25+
},
26+
'@angular/cdk': {
27+
eager: true
28+
},
29+
'@angular/cdk/': {
30+
eager: true
31+
},
32+
'@angular/material': {
33+
eager: true
34+
},
35+
'@angular/material/': {
36+
eager: true
37+
},
38+
rxjs: {
39+
eager: true
40+
},
41+
'rxjs/': {
42+
eager: true
43+
}
44+
}
45+
})
46+
]
47+
} as webpack.Configuration;

‎package.json

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,24 @@
22
"name": "angular-module-federation",
33
"version": "0.0.0",
44
"scripts": {
5-
"build": "webpack",
6-
"serve:dist": "concurrently \"serve dist/shell -l 5000 -s\" \"serve dist/mfe1 -l 3000 -s\" "
5+
"build": "ng build && ng build mf1",
6+
"serve:dist": "concurrently \"serve dist/shell -l 5000 -s\" \"serve dist/mf1 -l 3000 -s\" "
77
},
88
"private": true,
99
"resolutions": {
1010
"webpack": "^5.0.0"
1111
},
1212
"dependencies": {
13-
"@angular/animations": "~11.0.0-next.5",
14-
"@angular/common": "~11.0.0-next.5",
15-
"@angular/compiler": "~11.0.0-next.5",
16-
"@angular/core": "~11.0.0-next.5",
17-
"@angular/forms": "~11.0.0-next.5",
18-
"@angular/platform-browser": "~11.0.0-next.5",
19-
"@angular/platform-browser-dynamic": "~11.0.0-next.5",
20-
"@angular/router": "~11.0.0-next.5",
13+
"@angular/animations": "^11.0.3",
14+
"@angular/cdk": "^11.0.2",
15+
"@angular/common": "^11.0.3",
16+
"@angular/compiler": "^11.0.3",
17+
"@angular/core": "^11.0.3",
18+
"@angular/forms": "^11.0.3",
19+
"@angular/material": "^11.0.2",
20+
"@angular/platform-browser": "^11.0.3",
21+
"@angular/platform-browser-dynamic": "^11.0.3",
22+
"@angular/router": "^11.0.3",
2123
"concurrently": "^5.1.0",
2224
"json-stringify": "^1.0.0",
2325
"mini-css-extract-plugin": "^0.9.0",
@@ -26,11 +28,13 @@
2628
"zone.js": "~0.10.2"
2729
},
2830
"devDependencies": {
29-
"@angular-devkit/build-angular": "~0.1100.0-next.6",
30-
"@angular/cli": "~11.0.0-next.6",
31-
"@angular/compiler-cli": "~11.0.0-next.5",
31+
"@angular-builders/custom-webpack": "^11.0.0-beta.1",
32+
"@angular-devkit/build-angular": "^0.1100.3",
33+
"@angular/cli": "^11.0.3",
34+
"@angular/compiler-cli": "^11.0.3",
3235
"@types/jasmine": "~3.5.0",
3336
"@types/node": "^12.11.1",
37+
"@types/webpack": "^4.41.25",
3438
"codelyzer": "^6.0.0",
3539
"copy-webpack-plugin": "^5.1.1",
3640
"css-loader": "^5.0.0",
@@ -47,13 +51,14 @@
4751
"postcss-nested": "^4.2.1",
4852
"protractor": "~7.0.0",
4953
"sass-loader": "^10.0.3",
54+
"serve": "^11.3.2",
5055
"style-loader": "^2.0.0",
5156
"to-string-loader": "^1.1.6",
5257
"ts-node": "~8.3.0",
5358
"tslint": "~6.1.0",
5459
"typescript": "~4.0.2",
5560
"webpack": "^5.0.0",
56-
"webpack-cli": "^4.0.0",
61+
"webpack-cli": "^4.2.0",
5762
"webpack-dev-server": "^3.11.0",
5863
"webpack-virtual-modules": "^0.3.1"
5964
}

‎projects/mf1/e2e/protractor.conf.js

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎projects/mf1/e2e/src/app.e2e-spec.ts

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎projects/mf1/e2e/src/app.po.ts

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎projects/mf1/e2e/tsconfig.json

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)