Angular12升级动态导入路由后router-outlet不渲染组件问题

按优先级从高到低依次排查：

• 检查动态导入语法是否正确
  首先确认箭头函数正确返回了加载Promise，很多人改写法时随手加了花括号却漏写return，导致路由拿到的加载结果为undefined，且不会抛出明确报错。
  错误写法示例：

  // 错误：花括号包裹逻辑后无return，函数返回undefined
  loadChildren: () => { import('./lazy/lazy.module').then(m => m.LazyModule) }
  

  正确写法二选一即可：

  // 写法1：无花括号直接返回Promise
  loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  
  // 写法2：花括号内手动return
  loadChildren: () => {
    return import('./lazy/lazy.module').then(m => m.LazyModule)
  }
  

  临时在then回调里加打印，确认模块是否真的加载成功、返回的模块对象里确实存在你要取的模块类：

  loadChildren: () => import('./lazy/lazy.module').then(m => {
    console.log('懒加载模块导出内容：', m)
    return m.LazyModule
  })
  

  如果打印的对象里找不到LazyModule属性，检查是否把具名导出写成了默认导出，默认导出的模块要取m.default。

• 检查文件路径大小写问题
  Angular 12内置构建工具升级到Webpack 5，对文件路径大小写敏感度远高于Angular 11使用的Webpack 4。如果import路径里的文件夹、文件名大小写和实际文件系统不一致，会出现静默加载失败，无报错但路由无法挂载组件。逐字核对import路径的大小写，不要依赖旧版本的大小写兼容逻辑。

• 检查懒加载模块的路由配置正确性

  1. 打开懒加载模块文件，确认模块类确实通过export class XxxModule具名导出，类名和then回调里取的属性名完全一致
  2. 确认懒加载子模块的路由配置使用RouterModule.forChild()注册，绝对不能在子模块重复调用RouterModule.forRoot()，重复调用forRoot会覆盖根路由的出口注册逻辑，导致组件无法挂载到<router-outlet>
  3. 确认当前路由路径对应的目标组件，已经正确添加到懒加载模块的declarations数组中。Ivy编译模式下未声明的组件很多场景不会抛明确编译错误，只会渲染空白
  4. 确认懒加载模块的imports数组里正确引入了自身对应的路由模块，没有漏引

• 清理缓存排除编译残留问题
  Angular升级后旧的编译缓存很容易导致异常：

  1. 停止本地开发服务，删除项目根目录下的.angular缓存文件夹
  2. 删除node_modules/.cache文件夹
  3. 重新执行ng serve启动项目测试
     同时打开tsconfig.json，确认angularCompilerOptions下的enableIvy配置为true，Angular 12默认开启Ivy，若从旧版本升级时手动关闭了该配置，动态导入的懒加载模块会出现编译后无法挂载的问题。

• 检查自定义逻辑与组件自身渲染问题

  1. 如果项目中自定义了RouteReuseStrategy（路由复用策略），临时注释自定义逻辑，切换回Angular默认路由复用策略测试。旧版本的路由复用逻辑未适配Ivy编译后的组件实例类型时，会出现路由跳转成功但组件实例不挂载的问题
  2. 在目标路由组件的ngOnInit生命周期加打印，若跳转时打印能正常触发，说明组件已经实例化，问题出在模板渲染：
     • 检查模板最外层是否有*ngIf控制条件，升级后依赖注入逻辑变化可能导致条件值变为false，整个模板被隐藏
     • 检查组件是否启用了ViewEncapsulation.ShadowDom模式，升级后该模式的DOM挂载逻辑有变动，可能导致内容渲染到不可见的DOM节点
  3. 若ngOnInit的打印没有触发，回到懒加载模块的路由配置，检查目标组件的component属性是否拼写正确、没有写错类名。

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