如何阻止Angular转译器移除debugger语句？

你遇到的情况是本地启动时触发了生产环境的构建优化规则，以下是具体解决步骤：

1. 检查启动命令 #

确保执行的是纯ng serve，而非ng serve --prod或ng serve --configuration production。后者会强制启用生产环境配置，触发代码压缩、debugger移除等操作。

2. 修改angular.json核心配置 #

Angular的构建优化逻辑集中在angular.json中，需确保开发环境完全关闭优化：
找到项目对应的architect > build > configurations > development节点，设置如下参数：

"development": {
  "buildOptimizer": false,
  "optimization": false,
  "minify": false,
  "sourceMap": true,
  "extractLicenses": false,
  "vendorChunk": true,
  "commonChunk": true,
  "namedChunks": true
}

同时检查architect > serve配置，确保默认使用开发环境：

"serve": {
  "defaultConfiguration": "development",
  "configurations": {
    "development": {
      "browserTarget": "你的项目名:build:development"
    }
  }
}

其中optimization和minify是控制代码压缩、debugger移除的核心开关，buildOptimizer是Angular特有的构建优化工具，本地开发必须关闭。

3. 调整tsconfig.json辅助配置 #

虽然核心优化由Angular CLI控制，但tsconfig的部分设置可辅助提升调试体验：
在tsconfig.json的compilerOptions中确保：

"compilerOptions": {
  "sourceMap": true, // 生成sourceMap，方便关联TS源码调试
  "removeComments": false, // 保留代码注释
  "preserveConstEnums": true, // 保留枚举原始名称，避免被简化
  "target": "ES2020" // 使用较新ES版本，减少不必要的转译降级
}

注意：tsconfig本身无法直接控制debugger移除、变量压缩这类构建优化，这些逻辑由Angular CLI集成的webpack和terser工具处理，核心配置仍在angular.json中。

完成以上设置后重启ng serve，转译后的JS代码会保留debugger语句、原始变量名，逻辑结构也不会被简化，满足本地调试需求。

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