Angular 17 ESBuild环境变量配置问题求助

1. 基础方案：通过 Angular 环境文件 + esbuild define 配置 #

步骤1：定义环境变量占位符 #

在 src/environments/environment.ts（或对应环境的environment.prod.ts）中声明需要的变量：

// src/environments/environment.ts
export const environment = {
  production: false,
  COMMIT_SHA_SHORT: 'COMMIT_SHA_PLACEHOLDER',
  APP_VERSION: 'APP_VERSION_PLACEHOLDER'
};

步骤2：在 angular.json 配置 esbuild 替换规则 #

找到项目 architect.build.configurations 下的目标环境（比如production），添加 esbuildOptions 配置，直接通过shell命令注入实际值：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    // 原有配置
  },
  "configurations": {
    "production": {
      // 原有生产配置
      "esbuildOptions": {
        "define": {
          "environment.COMMIT_SHA_SHORT": "'$(git rev-parse --short HEAD)'",
          "environment.APP_VERSION": "'$(node -p \"require('./package.json').version\")'"
        }
      }
    }
  }
}

注意：Windows环境需调整命令，比如提前通过Git Bash获取提交哈希，或把变量写入系统环境变量后引用。

2. 进阶方案：使用 .env 文件 + 自定义 esbuild 构建器 #

步骤1：安装依赖 #

npm install @angular-builders/custom-esbuild dotenv --save-dev

步骤2：替换 Angular 构建器 #

修改 angular.json 中的构建器为自定义版本：

"build": {
  "builder": "@angular-builders/custom-esbuild:build",
  "options": {
    "customWebpackConfig": {
      "path": "./esbuild.config.js"
    },
    // 原有配置
  }
}

步骤3：编写自定义 esbuild 配置文件 #

创建 esbuild.config.js，读取.env文件并注入变量：

const { defineConfig } = require('@angular-builders/custom-esbuild');
const dotenv = require('dotenv');
const fs = require('fs');
const packageJson = require('./package.json');

// 读取本地.env文件
const envConfig = dotenv.parse(fs.readFileSync('.env'));
// 获取Git短提交哈希
const commitSha = require('child_process')
  .execSync('git rev-parse --short HEAD')
  .toString()
  .trim();

module.exports = defineConfig({
  esbuildOptions: {
    define: {
      'process.env.COMMIT_SHA_SHORT': `'${commitSha}'`,
      'process.env.APP_VERSION': `'${packageJson.version}'`,
      // 注入.env中的其他变量
      ...Object.fromEntries(
        Object.entries(envConfig).map(([key, val]) => [`process.env.${key}`, `'${val}'`])
      )
    }
  }
});

3. 验证变量有效性 #

在组件或服务中引入并打印变量，确认是否正常加载：

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

console.log('提交哈希:', environment.COMMIT_SHA_SHORT);
console.log('应用版本:', environment.APP_VERSION);

常见问题排查 #

• 检查angular.json中esbuildOptions是否配置在目标环境（如production）下，而非全局options。
• 确保变量名完全匹配，字符串值需要嵌套单引号（比如'${commitSha}'）。
• Windows环境执行Git命令需用Git Bash，或提前将变量写入系统环境变量。

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