@angular-architects/native-federation 20.1.5 → 20.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -95
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -387,103 +387,11 @@ This option was introduced with version 19.0.14.
|
|
|
387
387
|
|
|
388
388
|
#### Shell reloading when MFE finishes building for local development
|
|
389
389
|
|
|
390
|
-
|
|
390
|
+
Native Federation provides automatic shell reloading when remote Micro Frontends finish rebuilding during development. This feature eliminates manual page refreshes and significantly improves the development experience when working with multiple applications simultaneously.
|
|
391
391
|
|
|
392
|
-
|
|
392
|
+
For complete implementation details, configuration options, please refer to the article:
|
|
393
393
|
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
**1. Enable build notifications in the remote MFE**
|
|
397
|
-
|
|
398
|
-
In your remote's `angular.json`, add the `buildNotifications` configuration:
|
|
399
|
-
|
|
400
|
-
```json
|
|
401
|
-
{
|
|
402
|
-
"projects": {
|
|
403
|
-
"mfe1": {
|
|
404
|
-
"architect": {
|
|
405
|
-
"build": {
|
|
406
|
-
"builder": "@angular-architects/native-federation:build",
|
|
407
|
-
"options": {
|
|
408
|
-
"target": "mfe1:esbuild:development",
|
|
409
|
-
"rebuildDelay": 0,
|
|
410
|
-
"dev": true,
|
|
411
|
-
"buildNotifications": {
|
|
412
|
-
"enable": true
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
}
|
|
416
|
-
}
|
|
417
|
-
}
|
|
418
|
-
}
|
|
419
|
-
}
|
|
420
|
-
```
|
|
421
|
-
|
|
422
|
-
**2. Add the watcher to your shell application**
|
|
423
|
-
|
|
424
|
-
Import and call `watchFederationBuildCompletion` in your shell's `main.ts`:
|
|
425
|
-
|
|
426
|
-
```typescript
|
|
427
|
-
import {
|
|
428
|
-
watchFederationBuildCompletion,
|
|
429
|
-
BUILD_NOTIFICATIONS_ENDPOINT,
|
|
430
|
-
} from '@angular-architects/native-federation';
|
|
431
|
-
|
|
432
|
-
// Shell watching MFE1 (running on port 4201)
|
|
433
|
-
if (!environment.production) {
|
|
434
|
-
watchFederationBuildCompletion(
|
|
435
|
-
`http://localhost:4201${BUILD_NOTIFICATIONS_ENDPOINT}`
|
|
436
|
-
);
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
bootstrapApplication(AppComponent, appConfig);
|
|
440
|
-
```
|
|
441
|
-
|
|
442
|
-
##### Multiple MFEs
|
|
443
|
-
|
|
444
|
-
If your shell watches multiple MFEs, you can call the function multiple times:
|
|
445
|
-
|
|
446
|
-
```typescript
|
|
447
|
-
if (!environment.production) {
|
|
448
|
-
// Watch MFE1 on port 4201
|
|
449
|
-
watchFederationBuildCompletion(
|
|
450
|
-
`http://localhost:4201${BUILD_NOTIFICATIONS_ENDPOINT}`
|
|
451
|
-
);
|
|
452
|
-
|
|
453
|
-
// Watch MFE2 on port 4202
|
|
454
|
-
watchFederationBuildCompletion(
|
|
455
|
-
`http://localhost:4202${BUILD_NOTIFICATIONS_ENDPOINT}`
|
|
456
|
-
);
|
|
457
|
-
}
|
|
458
|
-
```
|
|
459
|
-
|
|
460
|
-
##### Requirements
|
|
461
|
-
|
|
462
|
-
- Only works in development mode (`dev: true`)
|
|
463
|
-
- Requires `buildNotifications.enable: true` in the target MFE's configuration
|
|
464
|
-
- MFEs must be running with the native-federation dev server
|
|
465
|
-
- Should never be enabled in production builds
|
|
466
|
-
|
|
467
|
-
##### Custom Endpoints
|
|
468
|
-
|
|
469
|
-
You can customize the notification endpoint if needed:
|
|
470
|
-
|
|
471
|
-
```json
|
|
472
|
-
{
|
|
473
|
-
"buildNotifications": {
|
|
474
|
-
"enable": true,
|
|
475
|
-
"endpoint": "/my-custom-build-events"
|
|
476
|
-
}
|
|
477
|
-
}
|
|
478
|
-
```
|
|
479
|
-
|
|
480
|
-
Then use it in your shell's watcher:
|
|
481
|
-
|
|
482
|
-
```typescript
|
|
483
|
-
watchFederationBuildCompletion('http://localhost:4201/my-custom-build-events');
|
|
484
|
-
```
|
|
485
|
-
|
|
486
|
-
This feature significantly improves the development experience by eliminating manual page refreshes and ensuring your shell always reflects the latest changes from your remote micro frontends.
|
|
394
|
+
**📖 [Fixing DX Friction: Automatic Shell Reloading in Native Federation](https://www.angulararchitects.io/en/blog/fixing-dx-friction-automatic-shell-reloading-in-native-federation/)**
|
|
487
395
|
|
|
488
396
|
## FAQ
|
|
489
397
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@angular-architects/native-federation",
|
|
3
|
-
"version": "20.1.
|
|
3
|
+
"version": "20.1.6",
|
|
4
4
|
"main": "src/index.js",
|
|
5
5
|
"generators": "./collection.json",
|
|
6
6
|
"builders": "./builders.json",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/core": "^7.19.0",
|
|
23
|
-
"@softarc/native-federation": "3.3.
|
|
24
|
-
"@softarc/native-federation-runtime": "3.3.
|
|
23
|
+
"@softarc/native-federation": "3.3.5",
|
|
24
|
+
"@softarc/native-federation-runtime": "3.3.5",
|
|
25
25
|
"@chialab/esbuild-plugin-commonjs": "^0.18.0",
|
|
26
26
|
"esbuild": "^0.25.1",
|
|
27
27
|
"mrmime": "^1.0.1",
|