There are two modules app and lazy modules. Need do display a lazy component in a named secondary outlet. The 'lazy component' is part of the submodule 'lazy'.
Navigation:
this.router.navigate([{outlets:{primary:'lazy', Secondary:'lazyComponent'}}]);
Correct navigation in answer below
App Module:
const routes: Routes = [
{
path: 'lazy',
loadChildren: './lazy.module#LazyModule'
}
]
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(routes)
],
bootstrap: [AppComponent]
})
export class AppModule { }
Lazy Module:
const routes: Routes = [
{
path: 'lazyComponent',
component: 'lazyComponent'
}
]
@NgModule({
declarations: [lazyComponent],
imports: [
RouterModule.forChild(routes)
]
})
export class LazyModule{ }
This doesn't work and the error is -> Error: Cannot match any routes. URL Segment: 'lazyComponent'
The following router navigation worked.
this.router.navigate(['/', 'lazy', {outlet:{secondary:'lazyComponent'}}])
First navigate to app module path and then to secondary outlet of lazy module.