Angular 9 + ASP.NET Core v2.2应用中懒加载时默认页面模块被提前加载的问题解决

看起来你的问题是Angular在加载WebsiteLayoutModule时，自动预加载了它所有子路由对应的懒加载模块，这确实不符合预期——只有当用户访问具体页面时才应该加载这些模块。下面是一步步的排查和解决方法：

1. 检查全局预加载策略 #

Angular默认的预加载策略是NoPreloading，也就是不会主动预加载任何懒加载模块。但如果你的AppRoutingModule中设置了preloadingStrategy: PreloadAllModules，就会导致所有懒加载模块在初始页面加载完成后被自动预加载。

打开app-routing.module.ts，确认RouterModule.forRoot的配置：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    // 确保这里是NoPreloading，或者完全不写（默认就是NoPreloading）
    preloadingStrategy: NoPreloading
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如果之前设置了PreloadAllModules，改成NoPreloading就能阻止全局预加载。

2. 验证子路由的路径配置 #

另一个常见原因是你的子路由路径被设置为空字符串，导致Angular认为这些模块是当前主页路径（/）的匹配项，从而立即加载。

检查WebSitePagesRoutes.LegaL.TermsOfUsePage和WebSitePagesRoutes.LegaL.PrivacyPolicyPage的值，确保它们是非空的具体路径，比如：

// 示例：确保路径是具体字符串
export const WebSitePagesRoutes = {
  LegaL: {
    TermsOfUsePage: 'terms-of-use',
    PrivacyPolicyPage: 'privacy-policy'
  }
};

这样，只有当用户访问/terms-of-use或/privacy-policy时，对应的懒加载模块才会被加载。

3. 确保子模块未被即时导入 #

如果WebsiteLayoutModule的imports数组中直接导入了TermsOfUseModule、PrivacyPolicyModule等子模块，那么这些模块会被当作即时加载模块，而不是懒加载模块——这会导致它们在进入主页时就被加载。

打开website-layout.module.ts，检查imports数组：

@NgModule({
  declarations: [WebsiteLayoutComponent],
  imports: [
    CommonModule,
    WebsiteLayoutRoutingModule,
    // 确保这里没有导入TermsOfUseModule、PrivacyPolicyModule等子模块
  ]
})
export class WebsiteLayoutModule { }

所有子模块必须仅通过loadChildren在路由中配置，不能直接导入到父模块中。

4. 优化子模块的路由配置 #

为了避免路由匹配的歧义，建议在每个子模块的路由中添加pathMatch: 'full'，确保只有当路径完全匹配空字符串时才加载组件：

// terms-of-use-routing.module.ts示例
const routes: Routes = [
  { path: '', component: TermsOfUsePageComponent, pathMatch: 'full' }
];

这能防止Angular因为部分匹配而意外加载模块。

按照上面的步骤逐一排查，应该就能解决不必要的预加载问题。如果还是有问题，可以检查浏览器的网络请求，确认触发这些default~*.js文件加载的具体路由匹配逻辑，或者查看Angular CLI的构建日志，看看这些模块是否被标记为即时加载模块。

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