调试Angular 12应用时变量名被缩短，如何修改配置保留原变量名？

你遇到的变量名被替换为短字符的情况是Angular生产构建阶段默认开启的代码混淆（mangle）功能导致的，由打包工具内置的Terser压缩器执行，和你当前贴的tsconfig配置无关，tsc本身不会做变量名重命名操作。

配置修改方法 #

方法1：临时调试用命令行参数 #

直接执行构建命令时添加关闭混淆的参数即可，无需修改配置文件：

# 生产构建时关闭变量混淆
ng build --configuration production --optimization.scripts.mangle=false

# 开发环境serve时关闭变量混淆
ng serve --optimization.scripts.mangle=false

方法2：永久修改angular.json配置 #

找到项目根目录下的angular.json文件，按如下路径修改对应配置：

{
  "projects": {
    "<你的实际项目名称>": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              // 找到原来的optimization配置，替换为以下内容
              "optimization": {
                "styles": true,
                "fonts": true,
                "scripts": {
                  "minify": true, // 保留代码压缩（去除空格、换行、注释）
                  "mangle": false // 关闭变量名混淆
                }
              }
            }
          }
        }
      }
    }
  }
}

修改完成后正常执行ng build --configuration production即可保留原始变量名。

注意事项 #

关闭变量名混淆会增大产包体积，仅建议在需要调试生产构建代码时开启，正式对外发布的版本建议恢复mangle: true配置，降低包体积同时提升代码安全性。

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