Angular 5无法匹配延迟加载模块的命名出口上的任何路由

参见英文答案 > Angular 4 Lazy loading with named router-outlet not working                                    2个
我的Root模块的路由是这样的：

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 
    })

它按预期工作,我可以在登录后路由到ManagementPortalModule.让我们来看看我的懒惰的ManagementPortalModule.

有一个命名的路由器插座.

<router-outlet name='sub'></router-outlet>

我在ManagementPortalModule中的路线.

RouterModule.forChild([
  {
    path: '',component: ManagementPortalComponent,children: [            
        { path: '',component: Test1Component,outlet: 'sub' },{ path: 'test2',component: Test2Component,outlet: 'sub' }            
    ]
  }         
])

它可以在开始时在’sub’出口加载Test1Component.我点击链接时想要路由到Test2Component

<a  [routerLink]="[{ outlets: { sub: ['test2'] } }]"></a>

生成的Url

/management-portal/(sub:test2)

当我点击时没有任何反应.然后我试了一下

<a [routerLink]="['',{ outlets: { sub: ['test2'] } }]">

网址

/management-portal(sub:test2)

根据this,我认为网址的格式正确,然后单击时出现错误

Cannot match any routes. URL Segment: ‘test2’

请帮助,非常感谢！

解决方法

尝试使用命名出口路由的非空顶级路径.

在ManagementPortalModule中路由.

RouterModule.forChild([
  {
    path: 'load',outlet: 'sub' }            
    ]
  }         
])

有关详细信息,请参阅：Angular 4 Lazy loading with named router-outlet not working