ng build -prod执行AOT构建报错，如何不依赖Webpack完成AOT构建？

我之前也碰到过类似的情况——明明没碰Webpack，启用AOT就报错，禁用就正常。其实问题出在Angular CLI底层调用AOT编译时的配置衔接上，不用手动配置Webpack也能搞定，咱们一步步来排查：

1. 先确认Angular CLI版本是否兼容 #

旧版本的Angular CLI在AOT编译逻辑上和@ngtools/webpack绑定得比较死，可能会出现这种找不到配置的错误。先查下当前版本：

ng version

如果是Angular 8及以下的老版本，建议升级到稳定版（注意备份项目）：

npm install -g @angular/cli
ng update @angular/cli @angular/core

2. 检查angular.json的生产环境配置 #

Angular CLI的AOT配置都在angular.json里，你要确保生产构建的配置是正确的，没有多余的Webpack自定义配置。找到projects -> [你的项目名称] -> architect -> build -> configurations -> production节点，确认包含以下关键配置：

"production": {
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ]
}

重点看"aot": true是否存在，同时如果之前加过webpackConfig这类自定义Webpack的配置项，先暂时移除，让CLI用默认的AOT逻辑。

3. 清理缓存后重新构建 #

缓存有时候会搞出奇怪的问题，先清掉Angular CLI的缓存：

ng clean

然后直接执行生产构建命令（新版本CLI里--prod默认已经启用AOT，不用额外加--aot=true）：

ng build --prod

4. 排查TypeScript配置是否符合AOT要求 #

AOT对TypeScript配置有一定要求，检查你的tsconfig.json和tsconfig.app.json：

• tsconfig.json的compilerOptions里，确保"module"是es2020或对应你Angular版本的模块类型，"target"至少是es2015
• tsconfig.app.json的include要覆盖src下所有的.ts和.d.ts文件，exclude包含node_modules、src/test.ts这类非应用代码

另外还要注意项目里有没有不兼容AOT的代码：比如模板里用了动态的函数调用（复杂逻辑的{{ func() }}）、未导出的组件被引用、用require()代替ES模块的import等，这些都可能导致AOT编译失败。

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