如何在Angular构建过程中按配置生成不同文件？

一、基础方案：利用Angular环境文件+多配置构建 #

这是Angular官方推荐的多环境构建方式，适合基于环境差异生成不同配置的文件：

1. 创建多套环境文件
   在src/environments/下新增对应环境的配置文件，比如生产/预发布/测试环境：

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiBaseUrl: 'https://prod.your-domain.com/api',
  buildTag: 'prod-v1'
};

// src/environments/environment.staging.ts
export const environment = {
  production: false,
  apiBaseUrl: 'https://staging.your-domain.com/api',
  buildTag: 'staging-v1'
};

2. 修改angular.json配置多环境构建规则
   在projects -> [你的项目名] -> architect -> build -> configurations下添加对应环境的配置，指定文件替换规则和构建参数：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "aot": true,
    "outputHashing": "media",
    "baseHref": "/prod/",
    "production": true
  },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ],
    "aot": true,
    "outputHashing": "media",
    "baseHref": "/staging/",
    "production": false
  }
}

3. 执行对应环境的构建命令

# 生产环境构建（会替换为prod环境文件）
ng build --configuration=production

# 预发布环境构建（会替换为staging环境文件）
ng build --configuration=staging

代码中通过import { environment } from '../environments/environment'读取配置，不同构建会生成对应配置的产物文件。

二、进阶方案：自定义多文件替换 #

如果需要替换环境文件之外的资源（比如组件模板、静态配置文件），可以在configuration中添加更多fileReplacements规则：

"staging": {
  "fileReplacements": [
    // 环境文件替换
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.staging.ts"
    },
    // 替换首页组件模板
    {
      "replace": "src/app/home/home.component.html",
      "with": "src/app/home/home.component.staging.html"
    },
    // 替换静态配置JSON
    {
      "replace": "src/assets/app-config.json",
      "with": "src/assets/app-config.staging.json"
    }
  ],
  // 其他构建参数...
}

三、灵活方案：自定义Webpack扩展构建逻辑 #

如果需要更复杂的动态文件生成逻辑（比如根据命令行参数动态生成文件），可以用@angular-builders/custom-webpack扩展构建流程：

1. 安装依赖：

npm install @angular-builders/custom-webpack --save-dev

2. 修改angular.json的构建器为自定义Webpack：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.custom.js"
      },
      // 原有基础构建配置...
    },
    // 多环境配置...
  }
}

3. 编写自定义Webpack配置文件webpack.custom.js，实现文件动态处理：

const fs = require('fs');
const path = require('path');

module.exports = (config, options) => {
  // 获取当前构建的环境配置
  const env = options.configuration;
  
  // 根据环境复制对应静态文件到输出目录
  const sourceConfig = env === 'staging' 
    ? path.resolve(__dirname, 'src/assets/config.staging.json')
    : path.resolve(__dirname, 'src/assets/config.prod.json');
  const targetConfig = path.resolve(__dirname, 'dist/your-project-name/assets/config.json');
  
  fs.copyFileSync(sourceConfig, targetConfig);
  
  return config;
};

4. 执行构建命令即可自动处理文件：

ng build --configuration=staging

为什么你原来的命令没生效？ #

你之前的ng build --prod --aot --output-hashing=media --base-href=...只是启用了默认的生产构建参数，但没有指定多环境的文件替换规则或自定义配置，所以无法根据条件生成不同文件。需要通过--configuration指定自定义的环境配置，或者在构建配置中添加文件替换逻辑。

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