升级到Angular 12后生产环境报错Uncaught TypeError: i is not a function

1. 优先修复依赖版本不匹配问题 #

• 你当前使用的@angular-builders/custom-webpack是12.0.0-beta.0测试版本，和正式版的@angular-devkit/build-angular@~12.0.0存在兼容性风险，首先将@angular-builders/custom-webpack升级到对应12的正式稳定版本，避免测试版本的自身缺陷导致打包异常。
• 执行命令更新依赖：npm i @angular-builders/custom-webpack@12 -D，更新后删除node_modules和package-lock.json重新安装依赖，再打生产包测试。

2. 开启生产打包sourcemap定位根因 #

• 修改angular.json配置，在生产构建的配置项中开启sourcemap：

"configurations": {
  "production": {
    "sourceMap": true,
    "optimization": false,
    // 其他原有配置保留
  }
}

• 重新执行ng build --configuration production打包，将生成的带sourcemap的代码部署到测试环境（不要直接上生产），此时浏览器控制台的报错会指向实际的业务代码位置，直接定位到报错的i函数对应的原始代码逻辑，就能快速找到是哪个依赖或者业务代码的问题。
  常见的触发原因包括：
• 升级后第三方依赖没有对应升级到支持Angular12的版本，导出的模块格式不符合打包后的调用规范
• 自定义webpack配置中添加的loader、plugin和Angular12的内置打包逻辑冲突，比如对ES模块的处理规则不一致
• 业务代码中使用了动态导入的语法，升级后Angular的打包策略变化导致导入的对象不符合预期

3. 快速验证是否是自定义webpack配置导致的问题 #

• 临时将angular.json中的builder从@angular-builders/custom-webpack:browser改回Angular默认的@angular-devkit/build-angular:browser，移除自定义webpack配置后打生产包测试，如果报错消失，说明问题出在自定义webpack配置和Angular12打包的兼容性上，针对性调整自定义配置即可，重点检查配置中对js/ts文件的编译规则、代码压缩规则、外部依赖externals配置。

4. 常见问题修复方案 #

• 如果确认是依赖导出问题，在tsconfig.json中添加"allowSyntheticDefaultImports": true和"esModuleInterop": true，解决CommonJS模块和ES模块互导的兼容性问题
• 检查是否在代码中使用了已经被Angular12废弃的API，比如旧的ViewEngine相关的调用，Angular12默认开启Ivy，部分旧API已经被移除

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