问题
My Route of the Root Module is like this:
RouterModule.forRoot([
{ path: '', redirectTo: 'management-portal', pathMatch: 'full' },
{ path: 'management-portal', loadChildren: './xxx/management-portal.module#ManagementPortalModule', canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: '**', component: NotFoundComponent }
], {
enableTracing: true
})
It works as expected , I can route to ManagementPortalModule after login. Let's take a look of my lazy-loaded ManagementPortalModule.
There is a named router-outlet.
<router-outlet name='sub'></router-outlet>
My Route in ManagementPortalModule.
RouterModule.forChild([
{
path: '', component: ManagementPortalComponent,
children: [
{ path: '', component: Test1Component, outlet: 'sub' },
{ path: 'test2', component: Test2Component, outlet: 'sub' }
]
}
])
It can load the Test1Component in the 'sub' outlet at the beginning. I want to route to Test2Component when I click on a link
<a [routerLink]="[{ outlets: { sub: ['test2'] } }]"></a>
The generated Url
/management-portal/(sub:test2)
nothing happened when I clicked.Then I tried
<a [routerLink]="['',{ outlets: { sub: ['test2'] } }]">
Url
/management-portal(sub:test2)
I think the url is in correct format according to this , Then error occured when I clicked
Cannot match any routes. URL Segment: 'test2'
Please Help, many thanks!
回答1:
Try non-empty, top-level path with named outlet routing.
Route in ManagementPortalModule.
RouterModule.forChild([
{
path: 'load', component: ManagementPortalComponent,
children: [
{ path: '', component: Test1Component, outlet: 'sub' },
{ path: 'test2', component: Test2Component, outlet: 'sub' }
]
}
])
For more details refer: Angular 4 Lazy loading with named router-outlet not working
来源:https://stackoverflow.com/questions/47494625/angular-5-cannot-match-any-routes-on-named-outlet-of-lazy-loaded-module