Nx/Angular项目环境变量配置报错，求正确自动化配置方案

错误原因 #

你使用的@nx/angular:browser-esbuild执行器不允许直接在build.options下添加define属性，该配置需要嵌套在esbuildOptions中，且不应将所有环境变量堆放在公共配置里，需按环境拆分到configurations下。这是导致Schema验证报错Data path "" must NOT have additional properties(define)的核心原因。

正确配置步骤 #

1. 修正project.json中的构建配置 #

将环境变量按不同环境拆分，嵌套到esbuildOptions下：

"targets": {
  "build": {
    "executor": "@nx/angular:browser-esbuild",
    "options": {
      // 保留原有build配置（如outputPath、index、main等）
      "esbuildOptions": {
        // 公共esbuild配置（若有）
      }
    },
    "configurations": {
      "dev": {
        "esbuildOptions": {
          "define": {
            "environment.api": "'[dev-api地址]'",
            "environment.clientId": "'[dev-clientId]'",
            "environment.redirect_uri": "'[dev-跳转地址]'"
          }
        }
      },
      "staging": {
        "esbuildOptions": {
          "define": {
            "environment.api": "'[staging-api地址]'",
            "environment.clientId": "'[staging-clientId]'",
            "environment.redirect_uri": "'[staging-跳转地址]'"
          }
        }
      },
      "prod": {
        "esbuildOptions": {
          "define": {
            "environment.api": "'[prod-api地址]'",
            "environment.clientId": "'[prod-clientId]'",
            "environment.redirect_uri": "'[prod-跳转地址]'"
          }
        }
      }
    }
  },
  "serve": {
    "executor": "@nx/angular:dev-server",
    "options": {
      "buildTarget": "[你的应用名]:build:dev", // 默认启动dev环境
      "port": 4300
    },
    "configurations": {
      "staging": {
        "buildTarget": "[你的应用名]:build:staging"
      },
      "prod": {
        "buildTarget": "[你的应用名]:build:prod"
      }
    }
  }
}

注意：define中的字符串值必须用单引号包裹（外层双引号，内层单引号），否则esbuild替换时会触发语法错误。

2. 调整类型定义文件 #

每个环境打包时只会注入当前环境的变量，无需在类型中区分多环境，修改src/app/type.d.ts：

declare const environment: {
    api: string;
    clientId: string;
    redirect_uri: string;
};

3. 启动对应环境的命令 #

• 启动dev环境：npx nx run [你的应用名]:serve --port 4300
• 启动staging环境：npx nx run [你的应用名]:serve:staging --port 4300
• 启动prod环境：npx nx run [你的应用名]:serve:prod --port 4300

额外优化：使用.env文件管理敏感变量 #

避免在project.json硬编码敏感信息，可通过Nx自动加载的.env文件注入变量：

1. 在项目根目录创建对应环境的.env文件：
   • .env.dev
   • .env.staging
   • .env.prod
2. 在文件中定义变量（前缀需为NX_，Nx才会识别）：

   NX_API_URL=https://api.dev.com
   NX_CLIENT_ID=dev-client-xxx
   

3. 修改project.json中的define配置：

   "define": {
     "environment.api": "'${NX_API_URL}'",
     "environment.clientId": "'${NX_CLIENT_ID}'",
     "environment.redirect_uri": "'${NX_REDIRECT_URI}'"
   }
   

Nx会自动读取对应环境的.env文件变量，无需手动设置系统环境变量。

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