ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'ɵmod') in Angular

170 Views Asked by At

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]: enter image description here enter image description here

enter image description here

Any solution, Thanks

0

There are 0 best solutions below