关于角度嵌套延迟路由的问题答案

【问题标题】：Issue on angular nested lazy routing关于角度嵌套延迟路由的问题
【发布时间】：2018-07-21 04:28:52
【问题描述】：

我正在尝试实现嵌套子延迟加载路由，但我遇到了一些关于路由的问题。

这是我的路由代码：- 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 它也会给我通用组件，因为我的路由器模块中没有定义确定的路由。

【问题讨论】：

抱歉，有什么问题？
即使我没有输入我在延迟加载路径中指定的完整 URL(page/forms/general)，它也会将我导航到 general -component。此外，如果我删除表单，即（页面/一般），它会呈现一般组件，而不是它应该给我找不到页面
看看这个 stackblitz。也许你错过了angular-lazy-loading-n98uay.stackblitz.io/pages/user。当您导航到 /pages 时，它会显示 User 组件
stackblitz.com/edit/angular-nested-lazy-route 当我输入 /pages 它应该给我 /pages/user 而不是它给 /pages/general 并且我懒惰地将我的一般页面路由为 /pages/forms/general 但一般组件可通过 /pages/general 访问。

标签： angular angular-ui-router angular4-router

【解决方案1】：

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

//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

【讨论】：