Angular使用loadChildren懒加载报too much recursion错误原因咨询

• 首先路由配置不符合Angular规范：单个路由配置项中component和loadChildren为互斥属性，不能同时声明。component表示路由匹配后直接渲染对应组件，loadChildren表示路由匹配后懒加载子模块，将子模块的路由挂载到当前路径的子节点下，二者同时配置会导致路由执行逻辑异常。
• 递归过深的具体触发逻辑：
  Angular路由默认采用前缀匹配规则，空字符串路径''可以匹配所有路由路径。当前配置中path: ''同时绑定了loadChildren加载MainModule，而MainModule内部没有配置对应子路由规则，Angular加载完MainModule后找不到可匹配的子路由，会回退到父级路由层重新匹配，父级的path: ''又会再次触发loadChildren加载MainModule，循环往复就触发了递归过深报错。
  当把path改为非空值（如main）后，只有路径前缀为main时才会触发懒加载，加载完MainModule后就算没有子路由，也不会回退到父级重复匹配该路由项，因此不会触发死循环。

根据业务需求选择以下任意一种方案即可：

保留懒加载模式 #

1. 移除路由配置中冗余的component: MainComponent属性
2. 在MainModule中新增子路由模块，配置空路径对应渲染MainComponent，代码示例如下：

// 新增 main-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './main.component';

const routes: Routes = [
  { path: '', component: MainComponent }
];

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

// 调整 main.module.ts，导入新增的子路由模块
@NgModule({
  declarations: [
    MainComponent,
  ],
  imports: [
    CommonModule,
    MainRoutingModule
  ],
})
export class MainModule { }

// 调整 DashboardRoutingModule 的路由配置
export const AppRoutes: Routes= [
  { 
    path : '' ,
    loadChildren: () => import('./main/main.module').then(m => m.MainModule)
  },
]

@NgModule({
  imports: [RouterModule.forChild(AppRoutes)],
  exports: [RouterModule],
})
export class DashboardRoutingModule{
}

取消懒加载模式 #

保留component: MainComponent配置，删除loadChildren属性，同时将MainModule导入到DashboardModule中即可，也就是你目前可以正常运行的写法。

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