Configure routing

apps/host/src/app/app.component.ts

@@ -6,8 +6,36 @@ import { NxWelcomeComponent } from './nx-welcome.component';
   standalone: true,
   imports: [NxWelcomeComponent, RouterModule],
   selector: 'nx-nf-root',
-  template: `<nx-nf-nx-welcome></nx-nf-nx-welcome>
-    <router-outlet></router-outlet>`,
+  template: `
+    <header class="bg-white">
+      <nav
+        class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
+        aria-label="Global"
+      >
+        <div class="hidden lg:flex lg:gap-x-12">
+          <a
+            routerLink="/home"
+            class="text-sm font-semibold leading-6 text-gray-900"
+            >Home</a
+          >
+          <a
+            routerLink="/my-account"
+            class="text-sm font-semibold leading-6 text-gray-900"
+            >My Account</a
+          >
+        </div>
+        <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+          <a
+            routerLink="/login"
+            class="text-sm font-semibold leading-6 text-gray-900"
+            >Log in <span aria-hidden="true">&rarr;</span></a
+          >
+        </div>
+      </nav>
+    </header>
+
+    <router-outlet></router-outlet>
+  `,
   styles: ``,
 })
 export class AppComponent {

apps/host/src/app/app.routes.ts

@@ -1,3 +1,29 @@
 import { Route } from '@angular/router';
+import { loadRemoteModule } from '@angular-architects/native-federation';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    redirectTo: 'home',
+    pathMatch: 'full',
+  },
+  {
+    path: 'home',
+    loadChildren: () =>
+      loadRemoteModule('mfHome', './routes').then(({ appRoutes }) => appRoutes),
+  },
+  {
+    path: 'login',
+    loadChildren: () =>
+      loadRemoteModule('mfLogin', './routes').then(
+        ({ appRoutes }) => appRoutes
+      ),
+  },
+  {
+    path: 'my-account',
+    loadChildren: () =>
+      loadRemoteModule('mfAccount', './routes').then(
+        ({ appRoutes }) => appRoutes
+      ),
+  },
+];

apps/mf-account/federation.config.js

@@ -1,15 +1,22 @@
-const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
+const {
+  withNativeFederation,
+  shareAll,
+} = require('@angular-architects/native-federation/config');
 
 module.exports = withNativeFederation({
-
   name: 'mf-account',
 
   exposes: {
+    './routes': './apps/mf-account/src/app/app.routes.ts',
     './Component': './apps/mf-account/src/app/app.component.ts',
   },
 
   shared: {
-    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
+    ...shareAll({
+      singleton: true,
+      strictVersion: true,
+      requiredVersion: 'auto',
+    }),
   },
 
   skip: [
@@ -18,6 +25,5 @@ module.exports = withNativeFederation({
     'rxjs/testing',
     'rxjs/webSocket',
     // Add further packages you don't need at runtime
-  ]
-
+  ],
 });

apps/mf-account/src/app/app.routes.ts

@@ -1,3 +1,9 @@
 import { Route } from '@angular/router';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    loadComponent: () =>
+      import('./app.component').then(({ AppComponent }) => AppComponent),
+  },
+];

apps/mf-home/federation.config.js

@@ -1,15 +1,22 @@
-const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
+const {
+  withNativeFederation,
+  shareAll,
+} = require('@angular-architects/native-federation/config');
 
 module.exports = withNativeFederation({
-
   name: 'mf-home',
 
   exposes: {
+    './routes': './apps/mf-home/src/app/app.routes.ts',
     './Component': './apps/mf-home/src/app/app.component.ts',
   },
 
   shared: {
-    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
+    ...shareAll({
+      singleton: true,
+      strictVersion: true,
+      requiredVersion: 'auto',
+    }),
   },
 
   skip: [
@@ -18,6 +25,5 @@ module.exports = withNativeFederation({
     'rxjs/testing',
     'rxjs/webSocket',
     // Add further packages you don't need at runtime
-  ]
-
+  ],
 });

apps/mf-home/src/app/app.routes.ts

@@ -1,3 +1,9 @@
 import { Route } from '@angular/router';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    loadComponent: () =>
+      import('./app.component').then(({ AppComponent }) => AppComponent),
+  },
+];

apps/mf-login/federation.config.js

@@ -1,15 +1,22 @@
-const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
+const {
+  withNativeFederation,
+  shareAll,
+} = require('@angular-architects/native-federation/config');
 
 module.exports = withNativeFederation({
-
   name: 'mf-login',
 
   exposes: {
+    './routes': './apps/mf-login/src/app/app.routes.ts',
     './Component': './apps/mf-login/src/app/app.component.ts',
   },
 
   shared: {
-    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
+    ...shareAll({
+      singleton: true,
+      strictVersion: true,
+      requiredVersion: 'auto',
+    }),
   },
 
   skip: [
@@ -18,6 +25,5 @@ module.exports = withNativeFederation({
     'rxjs/testing',
     'rxjs/webSocket',
     // Add further packages you don't need at runtime
-  ]
-
+  ],
 });

apps/mf-login/src/app/app.routes.ts

@@ -1,3 +1,9 @@
 import { Route } from '@angular/router';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    loadComponent: () =>
+      import('./app.component').then(({ AppComponent }) => AppComponent),
+  },
+];