Angular 2+ Lazy Loading 懒加载子路由无法正常访问问题咨询

1. 子模块路由注册配置缺失（最高概率问题） #

ExternalLayoutModule的@NgModule的imports数组中，必须添加RouterModule.forChild(ExternalRoutes)，子模块路由只能通过forChild注册，不能使用根路由的forRoot方法，示例配置如下：

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(ExternalRoutes) // 遗漏该行会导致子模块所有路由规则不生效
  ],
  declarations: [ExternalComponent, ProgrammesComponent]
})
export class ExternalLayoutModule { }

2. 路由路径匹配规则问题 #

• localhost:4200/programmes本身无法匹配：所有懒加载子模块的路由前缀都是父路由定义的external，该路径未在根路由中注册，自然无法访问
• 如果需要/external/programmes正常加载，若你希望ProgrammesComponent渲染在ExternalComponent内部，需要调整路由为嵌套结构，同时在ExternalComponent模板中添加<router-outlet>占位符，调整后的路由配置如下：

export const ExternalRoutes: Routes = [
  { 
    path: '', 
    component: ExternalComponent, 
    canActivate: [AuthGuard],
    children: [ // 子路由放入children数组才会渲染到父组件的router-outlet中
      { path: '', pathMatch: 'full' }, // 可配置默认展示内容
      { path: 'programmes', component: ProgrammesComponent, canActivate: [AuthGuard] }
    ]
  }
];

3. 根路由注册校验 #

确认AppModule的imports数组中已经添加RouterModule.forRoot(AppRoutes)，否则根路由规则不会生效。

4. 高版本Angular兼容配置 #

Angular 8+官方已弃用字符串形式的loadChildren写法，建议替换为动态import语法避免加载失败：

export const AppRoutes: Routes = [
  {
    path: 'external',
    loadChildren: () => import('./_Layouts/external-layout/external-layout.module').then(m => m.ExternalLayoutModule)
  }
]

5. 组件声明校验 #

确认ProgrammesComponent已经在ExternalLayoutModule的declarations数组中声明，或者在导入的共享模块中导出，否则组件无法正常渲染。

内容的提问来源于stack exchange，提问作者Rehan Khan