角度嵌套延迟路由问题

时间:2018-02-10 15:04:33

标签: angular angular-ui-router angular4-router

我试图实现嵌套的子延迟加载路由,但是我遇到了一些关于路由的问题。

这是我的路由代码: - app.modules.ts看起来像

  RouterModule.forRoot([
                         {path:'',redirectTo:'home',pathMatch:'full'},
                         {path:'home',component:HomeComponent},
          {path:'pages',loadChildren:'./pages/pages.module#PagesModule' },
          {path:'**',component: NotFoundComponent}
                       ],{enableTracing:true}) 

pages.module.ts看起来像: -

         RouterModule.forChild([
             { path:'', component:PagesComponent,
               children:[
                         {path:'',redirectTo:'user',pathMatch:'full'},
                         {path:'user',component:UserComponent },                                   


    {path:'forms',loadChildren:'./forms/forms.module#CustomFormsModule'}]
      }

]) 

forms.modules.ts: -

RouterModule.forChild([
    {path:'',component:FormsComponent,
          children:[
            {path:'',redirectTo:'general',pathMatch:'full'},
            {path:'general',component:GeneralComponent},
            {path:'advance',component:AdvanceComponent}
        ] }
])

当我输入路径http://localhost:4200/pages时 - 它会将我重定向到/ pages / general 即使我输入pages / general,它也会给我一般组件,因为我的routermodule中没有定义确定的路由。

1 个答案:

答案 0 :(得分:2)

问题是您在代码中导入了加载了懒惰的模块

//pages.module.ts
import { CustomFormsModule } from './forms/forms.module';
//...
  imports: [
CommonModule,
CustomFormsModule, //<--Don't do that

使用延迟加载的模块时,请不要明确导入它们,否则路由器会混淆

这是编辑过的stackblitz https://stackblitz.com/edit/angular-nested-lazy-route-kahove