Angular 16执行ng build时环境配置不匹配问题求助

你的生产构建始终使用开发环境的核心问题是**production配置缺少明确的环境文件绑定规则**，加上可能存在的代码导入错误，导致构建时没有正确切换到生产环境文件。

解决步骤 #

1. 检查代码中的环境导入 #

确保项目所有文件（组件、服务、main.ts等）中，导入的是基础环境文件environment.ts，而不是直接导入开发环境文件：

// ✅ 正确的导入方式
import { environment } from './environments/environment';

// ❌ 错误的导入方式（会强制使用开发环境）
import { environment } from './environments/environment.development';

2. 完善angular.json的生产配置 #

在projects.my-app.architect.build.configurations.production中补充必要的生产环境配置项，同时明确fileReplacements规则，确保构建时正确绑定生产环境文件：

"production": {
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "500kb",
      "maximumError": "1mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "2kb",
      "maximumError": "4kb"
    }
  ],
  "outputHashing": "all",
  // 新增生产环境专属优化配置+文件绑定规则
  "buildOptimizer": true,
  "optimization": true,
  "vendorChunk": false,
  "extractLicenses": true,
  "sourceMap": false,
  "namedChunks": false,
  "fileReplacements": [
    {
      "replace": "src/environments/environment.development.ts",
      "with": "src/environments/environment.ts"
    }
  ]
}

3. 验证构建结果 #

执行ng build --configuration=production后，检查dist目录下的编译产物，通过打印environment变量或查看打包后的代码，确认是否已切换到生产环境配置。

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