Angular多环境构建自动切换配置方案求助

1. 规范环境文件配置 #

确保三个环境文件的字段与需求匹配：

• src/environments/environment.ts（开发环境）：

export const environment = {
  production: false,
  hmr: true, // 可根据实际开发需求调整
  backend: false,
  staging: false,
  apiKey: 'devKey',
  API_URL: "dev-backend-link"
};

• src/environments/environment.stage.ts（预发布环境）：

export const environment = {
  production: false,
  hmr: false,
  backend: false,
  staging: true,
  apiKey: 'stagingKey',
  API_URL: "staging-backend-link"
};

• src/environments/environment.prod.ts（生产环境）：

export const environment = {
  production: true,
  hmr: false,
  backend: false,
  staging: false,
  apiKey: 'prodKey',
  API_URL: "prod-backend-link"
};

2. 完善angular.json的构建配置 #

在projects -> [你的项目名] -> architect -> build -> configurations下，补充staging和dev的配置：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "namedChunks": false,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
      },
      {
        "type": "anyComponentStyle",
        "maximumWarning": "6kb",
        "maximumError": "10kb"
      }
    ],
    "outputPath": "dist/production"
  },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.stage.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "namedChunks": false,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
      },
      {
        "type": "anyComponentStyle",
        "maximumWarning": "6kb",
        "maximumError": "10kb"
      }
    ],
    "outputPath": "dist/staging"
  },
  "dev": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.ts"
      }
    ],
    "optimization": false,
    "outputHashing": "none",
    "sourceMap": true,
    "namedChunks": true,
    "extractLicenses": false,
    "vendorChunk": true,
    "buildOptimizer": false,
    "outputPath": "dist/dev"
  }
}

注：dev配置若无需特殊优化，可直接复用默认build配置，仅指定outputPath即可。

3. 统一代码中的环境导入 #

删除代码中注释的其他环境导入，仅保留默认导入语句：

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

const API_URL = environment.API_URL;

Angular的fileReplacements机制会在构建时自动将environment.ts替换为对应配置指定的环境文件，无需手动切换。

4. 使用对应构建命令触发自动切换 #

直接执行以下命令构建对应环境，产物会自动生成到指定的dist子目录：

• 开发环境：ng build --configuration=dev
• 预发布环境：ng build --configuration=staging
• 生产环境：ng build --prod（或ng build --configuration=production）

Git流水线部署时，只需根据部署环境执行对应构建命令即可，完全无需手动修改代码。

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