Angular配置懒加载后模块初始全部加载，网络面板无法查看懒加载模块

问题根因 #

你遇到的懒加载失效、所有模块初始全加载的核心原因是路由配置规则错误：
Angular路由采用从上到下的优先匹配逻辑，你在layout-routing.module.ts的app父路由的子路由配置中，将所有懒加载模块的路由path都设置为了空字符串''，且没有添加pathMatch: 'full'限制：

• 当应用初始化导航到/app/projects时，父路由app被激活，会依次匹配子路由列表
• 所有path: ''的子路由都会被命中（空路径可以匹配任意父路由下的路径前缀，无全匹配限制时不会中断匹配流程），因此所有绑定了loadChildren的模块都会在此时被一次性加载
• 因为模块已经在初始阶段全部加载完成，后续导航到对应业务路径时自然不会再触发网络请求

解决方案 #

1. 给每个懒加载模块分配唯一的路径前缀，修改layout-routing.module.ts中app的子路由配置，同时将空路径重定向规则放到子路由列表末尾：

const routes: Routes = [
  // 根路径下的懒加载模块也需要分配对应路径，比如登录相关模块可以设为auth
  { path: 'auth', loadChildren: () => import('../membership/membership.module').then(m => m.MembershipModule) },
  {
    path: "app",
    component: LayoutComponent,
    canActivate: [AuthGuard],
    children: [
      // 每个懒加载模块指定唯一路径前缀
      { path: 'security-categories', loadChildren: () => import('../security-categories/security-categories.module').then(m => m.SecurityCategoriesModule) },
      { path: 'vault', loadChildren: () => import('../vault/vault.module').then(m => m.VaultModule) },
      { path: 'scanners', loadChildren: () => import('../scanners/scanners.module').then(m => m.ScannersModule) },
      { path: 'apigateway', loadChildren: () => import('../apigateway/apigateway.module').then(m => m.ApigatewayModule) },
      { path: 'activities', loadChildren: () => import('../activities/activities.module').then(m => m.ActivitiesModule) },
      { path: "dashboard", component: DashboardComponent },                
      { path: "projects", component: ProjectsListComponent },  
      // 空路径重定向放在所有路由的最后
      { path: "", redirectTo: "/app/projects", pathMatch: "full" },
    ]
  },
  { path: '**', component: ErrorComponent }
];

2. 额外检查项

• 确认所有懒加载模块没有被导入到AppModule、LayoutModule等全局生效的模块的imports数组中，否则会被直接打包入主包，无法实现懒加载
• 确认各个懒加载模块内部的路由配置使用相对路径，不需要加父级路径前缀，比如apigateway.routing.ts中的路由直接写path: 'list'，最终访问路径为/app/apigateway/list

补充说明 #

你打包时能正常输出懒加载chunk是因为import()语法已经被webpack识别，完成了代码拆分，只是路由匹配逻辑导致拆分后的包被提前全量加载了，修改路由配置后即可恢复正常的懒加载行为。

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