命名路由器插座和延迟加载模块

时间:2017-11-13 14:58:20

标签: angular lazy-loading router-outlet

我的命名路由器插座和延迟加载模块有问题。 我有2个路由器出口,没有名字,第二个被命名为 mainapp

app.component.html

<router-outlet></router-outlet>

app.main.component.html

<router-outlet name="mainapp"></router-outlet>

app.routes.ts

export const routes: Routes = [
    {path: 'login',  component: LoginComponent},
    {path: 'app', component: AppMainComponent, children:[
        {path: '', loadChildren: 'app/client/client.module#ClientModule'}
    ]}
];

client.module.ts

@NgModule({
  imports: [
    SharedModule,
    RouterModule.forChild([
      {path: 'client', component: ClientListComponent, outlet: "mainapp" },
      {path: 'client/:id', component: ClientComponent, outlet: "mainapp" }
    ])
  ],
  declarations: [ClientListComponent, ClientComponent],
  exports: [ClientListComponent, ClientComponent]
})
export class ClientModule { }
  1. LoginComponent已加载到路由器插座
  2. 登录AppMainComponent后加载到路由器插座
  3. 现在我尝试将ClientComponent加载到命名路由器插座 mainapp
  4. 我收到错误

    ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'app'
    Error: Cannot match any routes. URL Segment: 'app
    

    当我修改路线时,它可以工作:

    export const routes: Routes = [
        {path: 'login',  component: LoginComponent},
        {path: 'app', component: AppMainComponent, children:[
            {path: 'client', component: ClientListComponent, outlet: "mainapp" },
            {path: 'client/:id', component: ClientComponent, outlet: "mainapp" }
        ]}
    ];
    

1 个答案:

答案 0 :(得分:0)

似乎是您可以遵循的已知错误: https://github.com/angular/angular/issues/10981