update to angular 14 and mf 14.3

Author: manfredsteyer

package-lock.json

@@ -18,7 +18,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-architects/module-federation": "^14.3.2",
+    "@angular-architects/module-federation": "^14.3.3",
     "@angular/animations": "^14.0.0",
     "@angular/common": "^14.0.0",
     "@angular/compiler": "^14.0.0",

package.json

@@ -1,11 +1,8 @@
 <ul>
     <li><img src="../assets/angular.png" width="50"></li>
     <li><a routerLink="/">Home</a></li>
-    <li><a routerLink="/flights">Flights</a></li>
-    <li><a routerLink="/bookings">Bookings</a></li>
-
-    <!-- <li *ngFor="let mfe of microfrontends"><a [routerLink]="mfe.routePath">{{mfe.displayName}}</a></li> -->
-    <!-- <li><a routerLink="/config">Config</a></li> -->
+    <li *ngFor="let remote of remotes"><a [routerLink]="remote.routePath">{{remote.displayName}}</a></li>
+    <li><a routerLink="/config">Config</a></li>
 </ul>
 
 <router-outlet></router-outlet>

projects/shell/src/app/app.component.html

@@ -1,20 +1,30 @@
+import { getManifest, Manifest } from '@angular-architects/module-federation';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { buildRoutes } from '../menu-utils';
+import { CustomManifest, CustomRemoteConfig } from './utils/config';
+import { buildRoutes } from './utils/routes';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit  {
 
+  remotes: CustomRemoteConfig[] = [];
+
   constructor(
     private router: Router) {
   }
 
   async ngOnInit(): Promise<void> {
-    // const routes = buildRoutes(this.microfrontends);
-    // this.router.resetConfig(routes);
+    const manifest = getManifest() as CustomManifest;
+    
+    // Hint: Move this to an APP_INITIALIZER 
+    //  to avoid issues with deep linking
+    const routes = buildRoutes(manifest);
+    this.router.resetConfig(routes);
+
+    this.remotes = Object.values(manifest);
   }
 }
 

projects/shell/src/app/app.component.ts

@@ -13,22 +13,22 @@ export const APP_ROUTES: Routes = [
       path: 'config',
       component: ConfigComponent
     },
-    {
-      path: 'flights',
-      loadChildren: () => loadRemoteModule({
-          type: 'manifest',
-          remoteName: 'mfe1',
-          exposedModule: './Module'
-        })
-        .then(m => m.FlightsModule)
-    },
-    {
-      path: 'bookings',
-      loadChildren: () => loadRemoteModule({
-          type: 'manifest',
-          remoteName: 'mfe2',
-          exposedModule: './Module'
-        })
-        .then(m => m.BookingsModule)
-    },
+    // {
+    //   path: 'flights',
+    //   loadChildren: () => loadRemoteModule({
+    //       type: 'manifest',
+    //       remoteName: 'mfe1',
+    //       exposedModule: './Module'
+    //     })
+    //     .then(m => m.FlightsModule)
+    // },
+    // {
+    //   path: 'bookings',
+    //   loadChildren: () => loadRemoteModule({
+    //       type: 'manifest',
+    //       remoteName: 'mfe2',
+    //       exposedModule: './Module'
+    //     })
+    //     .then(m => m.BookingsModule)
+    // },
 ];

projects/shell/src/app/app.routes.ts

@@ -1,3 +1,3 @@
 <h1>Config</h1>
 
-<pre style="font-size:20px">{{ config | json }}</pre>
+<pre style="font-size:20px; background-color: whitesmoke;">{{ manifest | json }}</pre>

projects/shell/src/app/config/config.component.html

@@ -1,19 +1,13 @@
+import { getManifest } from '@angular-architects/module-federation';
 import { Component, OnInit } from '@angular/core';
-import { LookupService } from '../microfrontends/lookup.service';
-import { Microfrontend } from '../microfrontends/microfrontend';
+import { CustomManifest } from '../utils/config';
 
 @Component({
   selector: 'app-config',
   templateUrl: './config.component.html'
 })
-export class ConfigComponent implements OnInit {
+export class ConfigComponent {
 
-  constructor(private lookupService: LookupService) { }
-
-  config: Microfrontend[];
-
-  async ngOnInit() {
-    this.config = await this.lookupService.lookup();
-  }
+  manifest = getManifest() as CustomManifest;
 
 }

projects/shell/src/app/config/config.component.ts

@@ -0,0 +1,10 @@
+import { Manifest, RemoteConfig } from "@angular-architects/module-federation";
+
+export type CustomRemoteConfig = RemoteConfig & {
+    exposedModule: string;
+    displayName: string;
+    routePath: string;
+    ngModuleName: string;
+};
+
+export type CustomManifest = Manifest<CustomRemoteConfig>;