NX工作区中如何存储NestJS后端API_URL以在Angular库中复用

1. 集中存储位置：根目录环境文件 #

在NX工作区根目录创建统一的环境文件目录，所有前端应用、库均从这里导入变量：

• apps/environments/environment.ts（开发环境）
• apps/environments/environment.prod.ts（生产环境）

若根目录无apps/environments文件夹，直接新建即可，NX构建器默认识别该约定路径；若需自定义路径，后续可在项目配置文件中调整。

2. 环境文件内容示例 #

开发环境（environment.ts） #

export const environment = {
  production: false,
  API_URL: 'http://localhost:3000/api'
};

生产环境（environment.prod.ts） #

export const environment = {
  production: true,
  API_URL: 'https://prod-api.yourdomain.com/api'
};

3. 配置NX构建器自动切换环境 #

打开目标Angular应用的project.json（路径：apps/[你的应用名]/project.json），找到build节点下的configurations.production，确保fileReplacements配置指向生产环境文件：

"build": {
  "executor": "@nx/angular:browser",
  "options": {
    // 其他基础配置...
    "fileReplacements": [
      {
        "replace": "apps/environments/environment.ts",
        "with": "apps/environments/environment.prod.ts"
      }
    ]
  },
  "configurations": {
    "production": {
      // 其他生产构建配置...
      "fileReplacements": [
        {
          "replace": "apps/environments/environment.ts",
          "with": "apps/environments/environment.prod.ts"
        }
      ]
    }
  }
}

4. 在Angular库中复用环境变量 #

直接在库的代码中导入根目录的环境文件即可，无需在库内单独维护变量：

// 库内service或组件示例
import { environment } from '../../../../apps/environments/environment';

export class DataFetchService {
  private baseUrl = environment.API_URL;

  fetchList() {
    return this.http.get(`${this.baseUrl}/items`);
  }
}

嫌相对路径过长？可在tsconfig.base.json中配置路径别名简化导入：
在compilerOptions.paths中添加：

"@your-workspace/env": ["apps/environments/environment.ts"]

之后即可用import { environment } from '@your-workspace/env';快速导入

5. 验证Prod构建切换 #

执行生产构建命令：

nx build [你的应用名] --prod

构建完成后，检查dist/apps/[你的应用名]/main.[hash].js中的API_URL值，确认已自动切换为生产环境地址。

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