Angular 2中直接访问懒加载模块子路由时出现错误

嘿，我看你在尝试给通过loadChildren引入的懒加载模块动态配置子路由，刚好之前做过类似的需求，给你分享下具体的实现思路和代码：

首先，先确认基础的App路由配置是没问题的，就是你已经用loadChildren引入了LazyModule，这部分参考代码如下：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'lazy',
    // 懒加载引入LazyModule
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

接下来是关键的LazyModule部分，你现在初始给forChild传了空数组，要在模块构建时动态配置子路由。这里我们可以利用模块的初始化钩子+Router实例来动态修改路由配置：

// lazy.module.ts
import { NgModule, OnInit } from '@angular/core';
import { RouterModule, Routes, Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { LazyComponent } from './lazy.component';
import { TestComponent } from './test.component';
import { DefaultComponent } from './default.component';

// 初始传入空路由数组
const initialRoutes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(initialRoutes), CommonModule],
  declarations: [LazyComponent, TestComponent, DefaultComponent],
  // 注：Angular 9+ 启用Ivy后，entryComponents已经不需要了，新版本可以直接删掉这行
  entryComponents: [LazyComponent, TestComponent, DefaultComponent]
})
export class LazyModule implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    // 这里可以根据你的业务逻辑生成动态路由，比如从接口获取、根据权限生成等
    const dynamicChildRoutes: Routes = [
      { path: '', component: DefaultComponent }, // 懒加载模块的默认路由
      { path: 'test', component: TestComponent },
      { path: 'detail', component: LazyComponent }
    ];

    // 找到当前懒加载模块对应的根路由节点
    const lazyRootRoute = this.router.config.find(route => route.path === 'lazy');
    
    if (lazyRootRoute) {
      // 如果已有子路由就追加，没有就直接赋值
      if (lazyRootRoute.children) {
        lazyRootRoute.children.push(...dynamicChildRoutes);
      } else {
        lazyRootRoute.children = dynamicChildRoutes;
      }

      // 重置路由配置，让新的动态路由生效
      this.router.resetConfig(this.router.config);
    }
  }
}

补充几个实用注意点：

• 用ngOnInit是因为模块初始化完成后，Router的初始配置已经加载完成，这时候修改是安全的
• 如果你的动态路由需要从后端接口获取，建议把接口请求放在APP_INITIALIZER里，确保在模块加载前拿到路由数据，再传递到LazyModule里进行配置
• 如果你用的是Angular 9及以上版本，entryComponents可以直接移除，Ivy编译器会自动处理组件的入口注册

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