Nx Angular Monorepo中process未定义错误排查求助

我创建了一个新的Nx Angular Monorepo，尝试用以下代码打印环境变量：

export class AppComponent implements OnInit {
  ngOnInit() {
    console.log(process.env);
  }
}

但控制台抛出错误：

ERROR ReferenceError: process is not defined

我已经把@types/node添加到package.json，并在tsconfig.app.json中配置了types:["node"]，但问题依然存在，不知道还有什么解决方法。

我的配置文件 #

package.json

{
  "name": "@process-test/source",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "dependencies": {
    "@angular/animations": "~19.0.0",
    "@angular/common": "~19.0.0",
    "@angular/compiler": "~19.0.0",
    "@angular/core": "~19.0.0",
    "@angular/forms": "~19.0.0",
    "@angular/platform-browser": "~19.0.0",
    "@angular/platform-browser-dynamic": "~19.0.0",
    "@angular/router": "~19.0.0",
    "rxjs": "~7.8.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~19.0.0",
    "@angular-devkit/core": "~19.0.0",
    "@angular-devkit/schematics": "~19.0.0",
    "@angular/cli": "~19.0.0",
    "@angular/compiler-cli": "~19.0.0",
    "@angular/language-service": "~19.0.0",
    "@eslint/js": "^9.8.0",
    "@nx/angular": "20.3.0",
    "@nx/devkit": "20.3.0",
    "@nx/eslint": "20.3.0",
    "@nx/eslint-plugin": "20.3.0",
    "@nx/jest": "20.3.0",
    "@nx/js": "20.3.0",
    "@nx/playwright": "20.3.0",
    "@nx/web": "20.3.0",
    "@nx/workspace": "20.3.0",
    "@playwright/test": "^1.36.0",
    "@schematics/angular": "~19.0.0",
    "@swc-node/register": "~1.9.1",
    "@swc/core": "~1.5.7",
    "@swc/helpers": "~0.5.11",
    "@types/jest": "^29.5.12",
    "@types/node": "^18.16.9",
    "@typescript-eslint/utils": "^8.13.0",
    "angular-eslint": "^19.0.2",
    "eslint": "^9.8.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-playwright": "^1.6.2",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-preset-angular": "~14.4.0",
    "nx": "20.3.0",
    "prettier": "^2.6.2",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "tslib": "^2.3.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.13.0"
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "types": ["node"]
  },
  "files": ["src/main.ts"],
  "include": ["src/**/*.d.ts"],
  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
}

Angular（包括Nx集成的Angular）浏览器环境中默认不支持Node.js的process对象，仅添加类型定义无法解决运行时问题。需要通过以下方式处理环境变量：

方法1：使用Angular官方环境文件 #

1. 在项目的src/environments目录下创建（或修改）环境文件：

   • environment.ts（开发环境）
   • environment.prod.ts（生产环境）
     示例内容：

   // environment.ts
   export const environment = {
     production: false,
     apiUrl: 'http://localhost:3000',
     // 其他自定义环境变量
   };
   

2. 在组件中导入并使用：

   import { environment } from '../environments/environment';
   
   export class AppComponent implements OnInit {
     ngOnInit() {
       console.log(environment.apiUrl);
     }
   }
   

3. Nx会自动根据构建命令切换环境，比如nx build --prod会使用environment.prod.ts。

方法2：通过Nx配置注入系统环境变量 #

如果需要从系统环境变量注入到Angular应用：

1. 在项目的project.json中找到build目标，添加define配置：

   "targets": {
     "build": {
       "executor": "@nx/angular:browser",
       "options": {
         // 其他原有配置...
         "define": {
           "process.env.API_URL": JSON.stringify(process.env.API_URL)
         }
       }
     }
   }
   

2. 在src/typings.d.ts中添加类型声明，避免TS报错：

   declare var process: {
     env: {
       API_URL: string;
       // 按需添加其他变量类型
     };
   };
   

3. 启动项目前设置环境变量：

   # Linux/macOS
   export API_URL=http://api.example.com
   nx serve
   
   # Windows
   set API_URL=http://api.example.com
   nx serve
   

方法3：使用Nx的环境文件参数 #

如果是Nx Web项目，可通过nx serve的--env-file参数指定环境变量文件：

1. 创建.env文件：

   API_URL=http://localhost:3000
   

2. 修改project.json中的serve目标：

   "serve": {
     "executor": "@nx/web:file-server",
     "options": {
       "buildTarget": "your-project:build",
       "envFile": ".env"
     }
   }
   

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