Step 2 - Add wrapper to handle TypeScript module resolution errors; improve flexibility for defining routes.

Author: klerick

apps/host-application/src/app/app.component.html

@@ -1 +1,3 @@
+<lib-test-shared-library/>
+<a routerLink="/">main</a> | <a routerLink="/first">first1aa</a>
 <router-outlet></router-outlet>

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

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { TestSharedLibraryComponent } from '@nx-angular-mf/test-shared-library';
 
 @Component({
-  imports: [RouterModule],
+  imports: [RouterModule, TestSharedLibraryComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',

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

@@ -1,6 +1,13 @@
 import { Route } from '@angular/router';
+import { loadModule } from '@klerick/nx-angular-mf/loadModule';
 
 export const appRoutes: Route[] = [{
   path: '',
   loadComponent: () => import('./nx-welcome.component').then(r => r.NxWelcomeComponent)
-}];
+},   {
+  path: 'first',
+  loadChildren: () =>
+    loadModule<{ firstRoutes: Route[] }>('firstRemote/FirstRemoteRoute').then(
+      (r) => r.firstRoutes
+    ),
+},];

apps/mf1-application/tsconfig.app.json

@@ -4,7 +4,18 @@
     "outDir": "../../dist/out-tsc",
     "types": []
   },
-  "files": ["src/main.ts", "../../libs/nx-angular-mf/src/index.ts", "src/app/remote/second/index.ts"],
-  "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "files": [
+    "src/main.ts",
+    "src/app/remote/second/index.ts",
+    "../../libs/nx-angular-mf/src/loadModule.ts",
+    "../../libs/nx-angular-mf/src/index.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts"
+  ]
 }

libs/nx-angular-mf/project.json

@@ -49,7 +49,11 @@
             "glob": "executors.json",
             "output": "."
           }
-        ]
+        ],
+        "additionalEntryPoints": [
+          "libs/nx-angular-mf/src/loadModule.ts"
+        ],
+        "generateExportsField": true
       }
     },
     "nx-release-publish": {

libs/nx-angular-mf/src/loadModule.ts

@@ -0,0 +1,3 @@
+export async function loadModule<T = any>(url: string): Promise<T> {
+  return import(/* @vite-ignore */ url);
+}

tsconfig.base.json

@@ -16,6 +16,9 @@
     "baseUrl": ".",
     "paths": {
       "@klerick/nx-angular-mf": ["libs/nx-angular-mf/src/index.ts"],
+      "@klerick/nx-angular-mf/loadModule": [
+        "libs/nx-angular-mf/src/loadModule.ts"
+      ],
       "@nx-angular-mf/test-shared-library": [
         "libs/test-shared-library/src/index.ts"
       ]