Angular13生产构建后environment.production变量未生效问题求助

问题原因 #

• Angular 12+ 生产构建默认开启控制台日志移除功能，angular.json的production配置默认启用optimization.scripts下的removeConsole选项，会在构建阶段自动删除所有console相关代码，你写的console.log("MYAPP")直接被剔除，自然不会输出。
• 老项目升级的配置兼容问题，你的项目最初由Angular 8/9生成，升级到13后，Angular 13默认开启的buildOptimizer会对无副作用代码做激进的tree shaking，这段console逻辑如果被判定为冗余代码也会被直接移除。
• 小概率是环境变量配置错误，若生产环境对应的environment.prod.ts中production字段为false，这段代码根本不会执行。

解决方案 #

1. 关闭生产构建的console移除配置
   打开项目根目录的angular.json，找到projects -> 你的项目名 -> architect -> build -> configurations -> production节点，修改optimization配置：
   如果之前optimization是布尔值true，替换为以下对象格式，显式禁用日志移除：

"optimization": {
  "scripts": true,
  "styles": true,
  "fonts": true,
  "removeConsole": false
}

修改后重新执行构建命令即可看到日志输出。

2. 避免代码被tree shaking（如果关闭removeConsole后仍不生效）
   不需要关闭buildOptimizer，只要把console逻辑封装成单独函数即可避免被判定为无副作用代码删除：

// main.ts 调整代码
function printBootLog() {
  console.log("MYAPP");
}

if (environment.production) {
  enableProdMode();
  printBootLog();
}

3. 校验环境变量配置
   确认src/environments/environment.prod.ts中production字段值为true，同时核对production配置的文件替换规则正确：

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
]

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