如何向Angular构建过程传递自定义参数？

方法一：通过Node脚本动态生成环境配置文件 #

这是无额外插件依赖的轻量方案，适配CI/CD场景快速调整配置。

1. 创建参数解析脚本
   在项目根目录新建set-env.js文件，负责读取命令行参数并生成目标环境配置文件：

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

// 解析命令行传入的键值对参数
const cliArgs = process.argv.slice(2).reduce((result, arg) => {
  const [key, value] = arg.split('=');
  if (key && value) result[key] = value;
  return result;
}, {});

// 读取基础环境配置模板（可根据实际环境调整路径）
const baseEnvPath = path.join(__dirname, 'src/environments/environment.base.ts');
let baseEnvContent = fs.readFileSync(baseEnvPath, 'utf8');

// 替换模板中的占位符为命令行参数值
Object.keys(cliArgs).forEach(key => {
  const placeholder = `{{${key}}}`;
  baseEnvContent = baseEnvContent.replace(new RegExp(placeholder, 'g'), cliArgs[key]);
});

// 写入到目标环境文件（这里以生产环境为例）
const targetEnvPath = path.join(__dirname, 'src/environments/environment.prod.ts');
fs.writeFileSync(targetEnvPath, baseEnvContent.trim());

2. 准备基础环境模板
   在src/environments下创建environment.base.ts作为配置模板：

export const environment = {
  production: true,
  apiUrl: '{{apiUrl}}',
  connectionString: '{{connectionString}}',
  // 其他需要动态覆盖的配置项
};

3. 修改package.json构建脚本
   将脚本执行逻辑整合到构建流程：

"scripts": {
  "prebuild": "node set-env.js",
  "build": "ng build --configuration production"
}

4. 执行构建命令
   直接传入参数即可覆盖配置：

npm run build -- apiUrl=https://your-api.com connectionString=your-connection-string

方法二：结合环境变量与自定义Webpack配置 #

如果偏好使用环境变量传递参数，可通过自定义Webpack配置让Angular支持读取环境变量。

1. 安装依赖

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

2. 创建自定义Webpack配置
   新建webpack.config.js：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify({
        API_URL: process.env.API_URL,
        CONNECTION_STRING: process.env.CONNECTION_STRING
      })
    })
  ]
};

3. 修改angular.json配置
   将构建器替换为自定义Webpack构建器：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留原有其他配置项
    }
  }
}

4. 更新environment.prod.ts
   直接读取环境变量：

export const environment = {
  production: true,
  apiUrl: process.env.API_URL || 'default-api-url',
  connectionString: process.env.CONNECTION_STRING || 'default-connection-string'
};

5. 修改package.json脚本
   用cross-env传递环境变量：

"scripts": {
  "build": "cross-env API_URL=$npm_config_apiUrl CONNECTION_STRING=$npm_config_connection_string ng build --configuration production"
}

6. 执行构建命令

npm run build -- apiUrl=https://your-api.com connectionString=your-connection-string

适配Azure静态Web应用场景 #

在ARM模板的自定义构建命令中，直接使用上述构建命令即可，例如：

npm run build -- apiUrl=[你的API地址] connectionString=[你的连接字符串]

CI环境会自动执行脚本并覆盖配置，无需额外调整。

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