Angular项目ng build --prod --aot编译报错：无法加载RouterOutlet摘要

我之前也碰到过一模一样的问题，AOT编译和JIT编译的机制差异经常会导致这种看似诡异的矛盾报错，结合你的情况，给你几个针对性的解决方向：

• 先检查Router模块的导入大小写
  你报错里的路径是@angular/Router/router.d.ts，但Angular的官方包名是全小写的@angular/router！很多开发者会不小心把首字母写成大写，JIT编译可能会忽略这个大小写问题，但AOT编译对路径大小写非常敏感，直接会导致找不到正确的元数据。
  赶紧检查所有导入Router相关模块的地方，把错误的写法：

  import { RouterModule, Routes } from '@angular/Router';
  

  改成：

  import { RouterModule, Routes } from '@angular/router';
  

• 彻底清理依赖缓存
  有时候node_modules里的缓存文件或者损坏的包会干扰AOT编译，按这个步骤来一遍：

  1. 删除项目根目录下的node_modules文件夹
  2. 删除package-lock.json（用yarn的话删yarn.lock）
  3. 重新执行npm install（或yarn install）
  4. 清理Angular的本地缓存：Angular 12及以上用ng cache clear，旧版本用ng cache clean

• 规范懒加载路由的写法
  AOT编译无法解析动态生成的字符串路径，所以懒加载的导入语句必须用静态字符串。比如别这么写：

  const lazyModulePath = './features/dashboard/dashboard.module';
  { path: 'dashboard', loadChildren: () => import(lazyModulePath).then(m => m.DashboardModule) }
  

  一定要直接写静态路径：

  { path: 'dashboard', loadChildren: () => import('./features/dashboard/dashboard.module').then(m => m.DashboardModule) }
  

  另外还要确认懒加载模块里正确导入了RouterModule.forChild(...)，这个是基础但容易忘的点。

• 检查tsconfig.json的关键配置
  确保你的tsconfig.json里开启了大小写强制检查，同时配置了AOT需要的编译选项：

  {
    "compilerOptions": {
      "forceConsistentCasingInFileNames": true, // 强制文件名大小写一致，避免AOT查找错误
      "moduleResolution": "node",
      "strict": true,
      // 其他保持你的原有配置
    },
    "angularCompilerOptions": {
      "strictTemplates": true,
      "strictInjectionParameters": true
    }
  }
  

• 排查第三方库或自定义代码的冲突
  如果上面的方法都没用，试试临时移除项目里的第三方UI库或者自定义装饰器，有些库可能没有做好AOT兼容，会破坏Angular的元数据生成流程。如果移除后编译正常，再逐个加回来排查具体是哪个库的问题。

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