Step 2 - Configure routes: two routes in host-application, update mf1-application for dependency-free build.

klerick · klerick · commit 663cf110dbb4 · 2024-12-30T13:29:44.000+01:00
diff --git a/apps/host-application/project.json b/apps/host-application/project.json
@@ -15,7 +15,10 @@
         "mf": {
           "externalList": "build-external-list.json",
           "skipList": "build-skip-list.json",
-          "esPlugins": ["tools/esbuild-plugin/test-external-plugin.ts"]
+          "esPlugins": ["tools/esbuild-plugin/test-external-plugin.ts"],
+          "remoteEntry": {
+            "firstRemote": "http://localhost:4201/"
+          }
         },
         "outputPath": "dist/apps/host-application",
         "index": "apps/host-application/src/index.html",
diff --git a/apps/host-application/src/app/app.component.html b/apps/host-application/src/app/app.component.html
@@ -1,2 +1 @@
-<app-nx-welcome></app-nx-welcome>
 <router-outlet></router-outlet>
diff --git a/apps/host-application/src/app/app.component.ts b/apps/host-application/src/app/app.component.ts
@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { NxWelcomeComponent } from './nx-welcome.component';
 
 @Component({
-  imports: [NxWelcomeComponent, RouterModule],
+  imports: [RouterModule],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
diff --git a/apps/host-application/src/app/app.routes.server.ts b/apps/host-application/src/app/app.routes.server.ts
@@ -3,6 +3,6 @@ import { RenderMode, ServerRoute } from '@angular/ssr';
 export const serverRoutes: ServerRoute[] = [
   {
     path: '**',
-    renderMode: RenderMode.Prerender,
+    renderMode: RenderMode.Server,
   },
 ];
diff --git a/apps/host-application/src/app/app.routes.ts b/apps/host-application/src/app/app.routes.ts
@@ -1,3 +1,6 @@
 import { Route } from '@angular/router';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [{
+  path: '',
+  loadComponent: () => import('./nx-welcome.component').then(r => r.NxWelcomeComponent)
+}];
diff --git a/apps/mf1-application/project.json b/apps/mf1-application/project.json
@@ -11,6 +11,15 @@
       "executor": "./dist/libs/nx-angular-mf:build",
       "outputs": ["{options.outputPath}"],
       "options": {
+        "mf": {
+          "externalList": "build-external-list.json",
+          "skipList": "build-skip-list.json",
+          "esPlugins": ["tools/esbuild-plugin/test-external-plugin.ts"],
+          "exposes": {
+            "FirstRemoteRoute": "/apps/mf1-application/src/app/remote/first/index.ts",
+            "SecondRemoteRoute": "/apps/mf1-application/src/app/remote/second/index.ts"
+          }
+        },
         "outputPath": "dist/apps/mf1-application",
         "index": "apps/mf1-application/src/index.html",
         "browser": "apps/mf1-application/src/main.ts",
@@ -52,6 +61,9 @@
     "serve": {
       "dependsOn": ["^build"],
       "executor": "./dist/libs/nx-angular-mf:serve",
+      "options": {
+        "port": 4201
+      },
       "configurations": {
         "production": {
           "buildTarget": "mf1-application:build:production"
@@ -81,6 +93,7 @@
     "serve-static": {
       "executor": "@nx/web:file-server",
       "options": {
+        "port": 4001,
         "buildTarget": "mf1-application:build",
         "staticFilePath": "dist/apps/mf1-application/browser",
         "spa": true
diff --git a/apps/mf1-application/src/app/app.component.html b/apps/mf1-application/src/app/app.component.html
@@ -1,2 +1 @@
-<app-nx-welcome></app-nx-welcome>
 <router-outlet></router-outlet>
diff --git a/apps/mf1-application/src/app/app.component.ts b/apps/mf1-application/src/app/app.component.ts
@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { NxWelcomeComponent } from './nx-welcome.component';
 
 @Component({
-  imports: [NxWelcomeComponent, RouterModule],
+  imports: [RouterModule],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
diff --git a/apps/mf1-application/src/app/app.routes.ts b/apps/mf1-application/src/app/app.routes.ts
@@ -1,3 +1,13 @@
 import { Route } from '@angular/router';
+import { NxWelcomeComponent } from './nx-welcome.component';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    component: NxWelcomeComponent,
+  },
+  {
+    path: 'first',
+    loadChildren: () => import('./remote/first').then((r) => r.firstRoutes),
+  },
+];
diff --git a/apps/mf1-application/src/app/remote/first/first.component.css b/apps/mf1-application/src/app/remote/first/first.component.css
diff --git a/apps/mf1-application/src/app/remote/first/first.component.html b/apps/mf1-application/src/app/remote/first/first.component.html
@@ -0,0 +1,2 @@
+<lib-test-shared-library/>
+<p>first works!</p>
diff --git a/apps/mf1-application/src/app/remote/first/first.component.ts b/apps/mf1-application/src/app/remote/first/first.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TestSharedLibraryComponent } from '@nx-angular-mf/test-shared-library';
+
+@Component({
+  selector: 'app-first',
+  imports: [CommonModule, TestSharedLibraryComponent],
+  templateUrl: './first.component.html',
+  styleUrl: './first.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FirstComponent {}
diff --git a/apps/mf1-application/src/app/remote/first/index.ts b/apps/mf1-application/src/app/remote/first/index.ts
@@ -0,0 +1,9 @@
+import { Route } from '@angular/router';
+import { FirstComponent } from './first.component';
+
+export const firstRoutes: Route[] = [
+  {
+    path: '',
+    component: FirstComponent,
+  },
+];
diff --git a/apps/mf1-application/src/app/remote/second/index.ts b/apps/mf1-application/src/app/remote/second/index.ts
@@ -0,0 +1,9 @@
+import { Route } from '@angular/router';
+import { SecondComponent } from './second.component';
+
+export const secondRoutes: Route[] = [
+  {
+    path: '',
+    component: SecondComponent,
+  },
+];
diff --git a/apps/mf1-application/src/app/remote/second/second.component.css b/apps/mf1-application/src/app/remote/second/second.component.css
diff --git a/apps/mf1-application/src/app/remote/second/second.component.html b/apps/mf1-application/src/app/remote/second/second.component.html
@@ -0,0 +1 @@
+<p>second works!</p>
diff --git a/apps/mf1-application/src/app/remote/second/second.component.ts b/apps/mf1-application/src/app/remote/second/second.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-second',
+  imports: [CommonModule],
+  templateUrl: './second.component.html',
+  styleUrl: './second.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SecondComponent {}
diff --git a/apps/mf1-application/tsconfig.app.json b/apps/mf1-application/tsconfig.app.json
@@ -4,7 +4,7 @@
     "outDir": "../../dist/out-tsc",
     "types": []
   },
-  "files": ["src/main.ts"],
+  "files": ["src/main.ts", "../../libs/nx-angular-mf/src/index.ts"],
   "include": ["src/**/*.d.ts"],
   "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
 }
diff --git a/libs/nx-angular-mf/src/builders/build/schema.json b/libs/nx-angular-mf/src/builders/build/schema.json
@@ -685,6 +685,15 @@
           "items": {
             "type": "string"
           }
+        },
+        "indexHtmlTransformer": {
+          "type": "string"
+        },
+        "exposes": {
+          "type": "object"
+        },
+        "remoteEntry": {
+          "type": "object"
         }
       },
       "additionalProperties": false
diff --git a/libs/nx-angular-mf/src/builders/helpers/prepare-config.ts b/libs/nx-angular-mf/src/builders/helpers/prepare-config.ts
@@ -17,6 +17,9 @@ export async function prepareConfig(
   const skipList: ConfigMf['skipList'] = [];
   const externalList: ConfigMf['externalList'] = [];
   const esPlugins: ConfigMf['esPlugins'] = [];
+  const remoteEntry: ConfigMf['remoteEntry'] = defaultOptions.remoteEntry || {};
+  const exposes: ConfigMf['exposes'] = {};
+
   let indexHtmlTransformer = (input: string) => Promise.resolve(input);
 
   if (defaultOptions.skipList) {
@@ -62,7 +65,9 @@ export async function prepareConfig(
     outPutFileNames: [],
     esPlugins,
     allImportMap: {},
-    indexHtmlTransformer
+    indexHtmlTransformer,
+    remoteEntry,
+    exposes
   };
 }
 
diff --git a/libs/nx-angular-mf/src/builders/schema/index.ts b/libs/nx-angular-mf/src/builders/schema/index.ts
@@ -4,5 +4,7 @@ export type SchemaMf = {
     externalList?: string | string[];
     esPlugins?: string[];
     indexHtmlTransformer?: string;
+    exposes?: Record<string, string>;
+    remoteEntry?: Record<string, string>;
   };
 };
diff --git a/libs/nx-angular-mf/src/builders/schema/schema.json b/libs/nx-angular-mf/src/builders/schema/schema.json
@@ -44,6 +44,12 @@
         },
         "indexHtmlTransformer": {
           "type": "string"
+        },
+        "exposes": {
+          "type": "object"
+        },
+        "remoteEntry": {
+          "type": "object"
         }
       },
       "additionalProperties": false
diff --git a/libs/nx-angular-mf/src/builders/serve/schema.json b/libs/nx-angular-mf/src/builders/serve/schema.json
@@ -176,6 +176,15 @@
           "items": {
             "type": "string"
           }
+        },
+        "indexHtmlTransformer": {
+          "type": "string"
+        },
+        "exposes": {
+          "type": "object"
+        },
+        "remoteEntry": {
+          "type": "object"
         }
       },
       "additionalProperties": false
diff --git a/libs/nx-angular-mf/src/builders/types.ts b/libs/nx-angular-mf/src/builders/types.ts
@@ -7,6 +7,8 @@ export type ConfigMf = {
   esPlugins: string[];
   allImportMap: Record<string, unknown>;
   indexHtmlTransformer: (input: string) => Promise<string>;
+  exposes: Record<string, string>;
+  remoteEntry: Record<string, string>;
 };
 
 export type ShareOptions = {

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-<app-nx-welcome></app-nx-welcome>`
`2`	`1`	`<router-outlet></router-outlet>`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,6 @@ import { RenderMode, ServerRoute } from '@angular/ssr';`
`3`	`3`	`export const serverRoutes: ServerRoute[] = [`
`4`	`4`	`{`
`5`	`5`	`path: '**',`
`6`		`- renderMode: RenderMode.Prerender,`
	`6`	`+ renderMode: RenderMode.Server,`
`7`	`7`	`},`
`8`	`8`	`];`