Currently grappling with routing in my Angular 6 application. Wondering if the structure I have in mind is feasible. Here's what it looks like:
The App module contains the main routing with a parent route defining the layout:
const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: '',
component: LayoutComponent,
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
children: [
// {
// path: 'brands',
// loadChildren: 'app/modules/brands/brands.module#BrandsModule',
// pathMatch: 'prefix'
// }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes), BrandsModule, ItemsModule],
exports: [RouterModule],
providers: [BosRouteLoader]
})
export class RoutingModule {}
A feature module defines its own routing module like this:
const routes: Routes = [
{
path: 'brands',
children: [
{ path: '', component: BrandListComponent },
{ path: ':id', component: BrandDetailComponent },
{ path: '**', redirectTo: '' }
]
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BrandsRoutingModule {}
My goal is to have each feature module define its own routing and register those routes as child routes of the App module.
Leveraging lazy loading works, but requires me to always define an additional route in the App module, which I prefer not to do. If I avoid lazy loading, the parent route in the App component is never reached. So when navigating to http://localhost/brands, it loads the BrandListComponent without the LayoutComponent.
Is there a way to define routes in feature modules and register them as children of the main routing module?