Angular 12构建时动态设置环境变量customValue的方法

方案1：Angular 16+ 官方--define参数（推荐） #

Angular 16及以上版本原生支持通过--define参数在构建时直接替换代码中的占位符，无需额外依赖：

1. 修改src/environments/environment.prod.ts，将占位符改为可识别的标记：

export const environment = {
  production: true,
  customValue: '%CUSTOM_VALUE%'
};

2. 构建时通过命令行传入参数替换：

ng build --prod --configuration=production --define="CUSTOM_VALUE='hello'"

构建后environment.customValue会被替换为'hello'。

方案2：Node脚本+跨平台环境变量（兼容全版本） #

通过简单的Node脚本动态生成环境文件，避免手动修改或文件替换：

1. 安装跨平台环境变量工具cross-env：

npm install cross-env --save-dev

2. 项目根目录创建set-env.js脚本：

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

// 读取环境文件模板
const templatePath = path.join(__dirname, 'src/environments/environment.prod.template.ts');
const targetPath = path.join(__dirname, 'src/environments/environment.prod.ts');

let content = fs.readFileSync(templatePath, 'utf8');
// 替换占位符为命令行传入的环境变量值
const customValue = process.env.CUSTOM_VALUE || 'PLACEHOLDER';
content = content.replace(/'PLACEHOLDER'/, `'${customValue}'`);

// 写入最终环境文件
fs.writeFileSync(targetPath, content);

3. 复制原environment.prod.ts为environment.prod.template.ts，保持原内容不变：

export const environment = { production: true, customValue: 'PLACEHOLDER' };

4. 在package.json中添加构建脚本：

"scripts": {
  "build:prod": "cross-env CUSTOM_VALUE='hello' node set-env.js && ng build --prod --configuration=production"
}

5. 执行构建命令：

npm run build:prod

需要修改值时，直接替换脚本中的CUSTOM_VALUE='hello'即可。

方案3：dotenv+环境变量注入 #

利用dotenv加载环境变量，在代码中直接读取：

1. 安装dotenv：

npm install dotenv --save-dev

2. 修改environment.prod.ts，引入并读取环境变量：

require('dotenv').config({ path: '.env.production' });

export const environment = {
  production: true,
  customValue: process.env.CUSTOM_VALUE || 'PLACEHOLDER'
};

3. 构建时可通过命令行直接传入值：

CUSTOM_VALUE='world' ng build --prod --configuration=production

如果需要默认值，可在项目根目录创建.env.production文件：

CUSTOM_VALUE=default_value

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