I am currently exploring the dynamic loading of lazy child routes within a lazy routing module.
For example:
const serverResponse = [
{
path: "transaction",
children: [
{
path: "finance",
modulePath: "./modules/finance/finance.module",
moduleName: "FinanceModule",
},
],
},
];
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class LoanOriginationRoutingModule {
constructor(private router: Router) {
this.router.events.pipe(take(1)).subscribe((event) => {
const parentRoute: any = this.router.config.find(
(route: any) => route.path === "loanoriginationLib/loanorigination"
);
serverResponse.forEach((item) => {
const childRoutes = item.children.map((subItem) => {
return {
path: subItem.path,
loadChildren: () =>
import(subItem.modulePath).then((m) => m[subItem.moduleName]),
};
});
parentRoute._loadedConfig.routes.push({
path: item.path,
children: childRoutes,
});
});
this.router.resetConfig(this.router.config);
});
}
}
Upon attempting to access the finance module in the application, I encounter the following warning message displayed in the console:
Critical dependency: the request of a dependency is an expression
Additionally, when trying to access the finance module via the app, an error is logged in the browser console:
core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot find module './modules/finance/finance.module'
Error: Cannot find module './modules/finance/finance.module'
at lib lazy namespace object:5
at ZoneDelegate.invoke (zone-evergreen.js:359)
at Object.onInvoke (core.js:39699)
...
Project environment details:
Angular CLI: 8.3.29
Node: 14.7.0
OS: win32 x64
Angular: 8.2.14
...
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.803.29
...
webpack 4.39.2
Is there a solution to address these issues?
Thank you for your time and consideration.