调试旧Angular项目遇混淆代码，能否禁用混淆？

调试旧Angular项目时遇到如下混淆后的依赖注入错误：

NullInjectorError: R3InjectorError(n)[c -> n -> J -> J -> J]:
NullInjectorError: No provider for J!
at Qd.get (main.js:1:1159201)
at gy.get (main.js:1:1160554)
at gy.get (main.js:1:1160554)
at gy.get (main.js:1:1160554)
at Rv (main.js:1:1131811)
at Object.Ir (main.js:1:1131912)
at n.ɵfac [as factory] (main.js:1:194040)
at gy.hydrate (main.js:1:1162531)
at gy.get (main.js:1:1160506)
at Rv (main.js:1:1131811)

能否禁用代码混淆？ #

可以直接禁用代码混淆，步骤根据项目构建方式不同分为两种：

Angular CLI项目

修改angular.json文件，找到对应调试环境（通常是development）的build配置，调整以下参数：

"configurations": {
  "development": {
    "optimization": false,
    "buildOptimizer": false,
    "aot": false
  }
}

• optimization: false会关闭包括代码混淆在内的所有构建优化
• buildOptimizer: false禁用Angular特有的构建优化插件
• 暂时关闭aot能进一步简化调试流程，也可根据项目需求保留

修改后重新构建项目，生成的代码会保留原始类名、变量名，错误信息里的J、n等占位符会替换成真实的服务/类名称。

自定义Webpack配置项目

如果项目使用自定义webpack.config.js，找到TerserPlugin相关配置项，要么移除该插件，要么设置minify为false，示例：

module.exports = {
  // ...其他配置
  optimization: {
    minimize: false,
    // 或者针对TerserPlugin单独设置
    minimizer: [
      new TerserPlugin({
        minify: false
      })
    ]
  }
};

禁用混淆后的下一步 #

禁用混淆后，能直接看到错误中缺失依赖的真实服务名称，此时只需确保该服务：

• 在所属模块的providers数组中声明
• 或者在服务类上添加@Injectable({ providedIn: 'root' })标记为全局提供

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