I'm trying to create a micro service frontend in angular
Using this code for route :
import { loadRemoteModule } from './federation-utils';
import { Routes } from '@angular/router';
import { APP_ROUTES } from '../app.routes';
import { Microfrontend } from '../core/services/microfrontends/microfrontend.types';
export function buildRoutes(options: Microfrontend[]): Routes {
const lazyRoutes: Routes = options.map((o) => ({
path: o.routePath,
loadChildren: () => loadRemoteModule(o).then((m) => m[o.ngModuleName]),
canActivate: o.canActivate,
pathMatch: 'full'
}));
return [
...APP_ROUTES,
...lazyRoutes
];
}
getting this error
> ERROR Error: Uncaught (in promise): TypeError: Cannot read properties
> of undefined (reading 'ɵmod')
Link : https://dzone.com/articles/how-to-build-micro-frontend-based-on-angular
options contains these values:
[
{
"remoteEntry": "http://localhost:4204/remoteEntry.js",
"remoteName": "dashboard",
"exposedModule": "DashboardModule",
"displayName": "Dashboard",
"routePath": "",
"ngModuleName": "DashboardModule",
"canActivate": [
null
]
},
{
"remoteEntry": "http://localhost:4202/remoteEntry.js",
"remoteName": "table",
"exposedModule": "TablePageModule",
"displayName": "Table",
"routePath": "table",
"ngModuleName": "TablePageModule"
},
{
"remoteEntry": "http://localhost:4201/remoteEntry.js",
"remoteName": "register",
"exposedModule": "RegisterPageModule",
"displayName": "Register",
"routePath": "signup",
"ngModuleName": "RegisterPageModule",
"canActivate": [
null
]
},
{
"remoteEntry": "http://localhost:4203/remoteEntry.js",
"remoteName": "staticPage",
"exposedModule": "StaticPageModule",
"displayName": "Static page",
"routePath": "static",
"ngModuleName": "StaticPageModule"
}
]
Console Output of m[o.ngModuleName]:

Any solution, Thanks
