Angular懒加载功能失效，加载懒加载模块时页面白屏如何解决？

常见故障原因 #

• 懒加载模块未正确导入自身路由模块：Minigame1Module的imports数组没有引入Minigame1RoutingModule，导致子路由未注册，路径匹配失败后页面空白
• 目标组件未在懒加载模块中声明：FallingballComponent没有加入Minigame1Module的declarations数组，也没有从共享模块引入，组件无法正常渲染
• base href配置错误：index.html中的<base href>配置或者angular.json中的baseHref配置不符合部署路径要求，导致懒加载的资源文件请求404
• 路由顺序冲突：AppRoutingModule中如果存在通配符路由（比如path: '**'对应的404路由），放在了minigame1路由的前面，会提前拦截路径请求
• 编译缓存异常：本地开发时缓存的旧编译产物没有更新，新的路由配置未生效
• 版本兼容问题：Angular 8以下的旧版本不支持import()语法的懒加载写法，需要改用字符串形式的loadChildren配置

排查步骤 #

1. 优先打开浏览器控制台（F12）查看报错信息：
   • 若报模块不存在错误，检查Minigame1Module的导出拼写、文件路径是否正确
   • 若报组件无法识别错误，检查FallingballComponent的注册状态
   • 若报资源404错误，检查base href配置
2. 核对Minigame1Module的代码配置，确保符合以下规范：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Minigame1RoutingModule } from './minigame1-routing.module';
import { FallingballComponent } from './fallingball/fallingball.component';

@NgModule({
  declarations: [FallingballComponent],
  imports: [
    CommonModule,
    Minigame1RoutingModule
  ]
})
export class Minigame1Module { }

3. 检查AppRoutingModule的路由顺序，所有通配符路由必须放在路由数组的最后位置，避免拦截正常业务路由
4. 确认base href配置：本地开发时默认应为<base href="/">，如果部署在站点子目录下，需要修改为对应的子路径，比如部署在/game/目录下就改为<base href="/game/">
5. 清理缓存重启开发服务：执行ng cache clean清理Angular编译缓存，删除node_modules/.cache目录后重新执行ng serve启动服务

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