Angular 5 Cannot match any routes on named outlet of lazy loaded module [duplicate]

Question

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!

Answer 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