It looks like we're missing the forLazy() call from our module import, but it seems that's something we need to manually create on our modules and just looking at your link, I don't understand how to create this (in explanation, I don't understand what's happening in the forChild() call).
Here's an anonymized sample of how we've set things up (routes and module names changed to protect our client). Apologies if some of this is implemented strangely; our team is somewhat inexperienced with Angular.
Would this all work if we implemented and used forLazy() on all of our routing modules that do lazy loading?
/src/app/app-routing.module.ts
import { authGuard, permissionGuard } from '@abp/ng.core';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
// ... Removed default ABP routes
// Custom routes
{
path: 'module1',
loadChildren: () => import('./modules/module1/module1.module').then(m => m.Module1),
},
{
path: 'module2',
loadChildren: () => import('./modules/module2/module2.module').then(m => m.Module2),
},
{
path: 'module3',
loadChildren: () => import('./modules/module3/module3.module').then(m => m.Module3),
},
{
path: 'module4',
loadChildren: () => import('./modules/module4/module4.module').then(m => m.Module4),
},
];
@NgModule({
imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
exports: [RouterModule],
})
export class AppRoutingModule {}
/src/app/modules/module1/module1-routing.module.ts
import { NgModule } from '@angular/core';
import { permissionGuard } from '@abp/ng.core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
children: [
{
path: 'page1',
loadChildren: () => import('./module1/page1.module').then(m => m.Page1Module), // Has own routing that exposes child routes for CRUD operations (list, edit, create, update)
},
{
path: 'page2',
loadChildren: () => import('./module1/page2.module').then(m => m.Page2Module), // Has own routing that exposes child routes for CRUD operations (list, edit, create, update)
},
// ... snip ...
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class Module1RoutingModule { }
/src/app/route.provider.ts
import { RoutesService, eLayoutType } from '@abp/ng.core';
import { APP_INITIALIZER } from '@angular/core';
export const APP_ROUTE_PROVIDER = [
{ provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
];
function configureRoutes(routes: RoutesService) {
return () => {
routes.add([
{
path: '/',
name: '::Menu:Home',
iconClass: 'fas fa-home',
order: 1,
layout: eLayoutType.application,
},
{
path: '/dashboard',
name: '::Menu:Dashboard',
iconClass: 'fas fa-chart-line',
order: 2,
layout: eLayoutType.application,
},
{
name: '::Menu:Module1',
order: 3,
iconClass: 'fa fa-gear',
layout: eLayoutType.application,
},
{
path: '/module1/page1',
name: 'M1P1',
parentName: '::Menu:Module1',
order: 1,
iconClass: 'fas fa-table',
layout: eLayoutType.application,
},
{
path: '/module1/page2',
name: 'M1P2',
parentName: '::Menu:Module1',
iconClass: 'fas fa-table',
order: 2,
layout: eLayoutType.application,
},
// ... snip ...
]);
};
}