Angular 12运行ng serve加载environment.prod.ts而非开发环境配置如何解决

问题根源 #

Angular 12 开始调整了默认配置逻辑，两个常见原因会导致你遇到的问题：

• angular.json中serve配置块的defaultConfiguration被误设为了production
• build配置下的development配置没有对齐官方约定的文件替换规则，你当前使用的反向替换（把prod文件替换为dev文件）确实属于临时变通方案，不符合官方设计逻辑

正确配置步骤 #

步骤1：确认serve块的默认配置 #

打开angular.json，找到对应项目下的serve配置节点，确保默认配置指向development：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "defaultConfiguration": "development",
  "configurations": {
    "production": {
      "browserTarget": "你的项目名:build:production"
    },
    "development": {
      "browserTarget": "你的项目名:build:development"
    }
  }
},

步骤2：对齐build块的官方标准替换规则 #

官方约定的逻辑是：业务代码中统一导入src/environments/environment.ts，不同环境下替换这个基础文件为对应环境的配置，不需要反向替换prod文件。
把你之前加在development配置里的反向fileReplacements删掉，调整为如下配置即可：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "defaultConfiguration": "production",
  "configurations": {
    "production": {
      // 其他原有生产配置保留即可
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
      // 开发环境不需要加fileReplacements，直接读取默认的environment.ts即可
    }
  }
}

步骤3：校验代码导入路径 #

确保所有业务代码里导入环境配置的语句都是：

import { environment } from '../environments/environment';

不要直接导入environment.prod.ts。

配置完成后直接执行ng serve就会自动加载开发环境的environment.ts，执行ng build默认打生产包会自动替换为生产环境配置，完全符合官方设计逻辑，不需要额外加启动参数。

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