Angular 14升级至15时出现“Cannot find name process”错误求助

问题概述 #

将Angular 14应用升级到15版本后，出现TS2591错误：

TS2591: Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.

已安装@types/node并在tsconfig.json的types字段添加了node，重启VS Code后问题仍未解决。

环境信息 #

• Node版本：18.10.0
• npm版本：8.19.2

相关配置与代码 #

package.json #

{  
  "name": "workplace",  
  "version": "0.0.0",  
  "scripts": {    
    "ng": "ng",    
    "start": "ng serve",    
    "test": "jest",  
  },  
  "private": true,  
  "dependencies": {    
    "@angular-builders/jest": "^15.0.0",    
    "@angular/animations": "15.2.1",    
    "@angular/common": "15.2.1",    
    "@angular/compiler": "15.2.1",    
    "@angular/core": "15.2.1",    
    "@angular/forms": "15.2.1",    
    "@angular/platform-browser": "15.2.1",    
    "@angular/platform-browser-dynamic": "15.2.1",    
    "@angular/router": "15.2.1",    
    "@ngxs/store": "^3.7.6",    
    "@types/lodash-es": "^4.17.7",    
    "date-fns": "^2.29.3",    
    "dotenv": "^16.0.3",    
    "dotenv-webpack": "^8.0.1",    
    "json5": "^2.2.3",    
    "lodash-es": "^4.17.21",    
    "ngx-cookie-service": "^15.0.0",    
    "node-fetch": "^2.6.8",    
    "printj": "^1.3.1",    
    "rxjs": "7.8.0",    
    "tslib": "2.5.0",    
    "zone.js": "0.11.8"  
  },  
  "devDependencies": {    
    "@angular-builders/custom-webpack": "^15.0.0",    
    "@angular-devkit/build-angular": "^15.2.4",    
    "@angular/cli": "15.2.1",    
    "@angular/compiler-cli": "15.2.1",    
    "@cypress/schematic": "^2.5.0",    
    "@ngxs/devtools-plugin": "^3.7.6",    
    "@openapitools/openapi-generator-cli": "2.5.2",    
    "@testing-library/angular": "12.1.2",    
    "@testing-library/jest-dom": "5.16.5",    
    "@types/jest": "29.4.2",    
    "@types/node": "^18.15.3",    
    "eslint-plugin-ngxs-style-guide": "^3.0.0",    
    "jest": "29.5.0",    
    "jest-preset-angular": "13.0.0",    
    "replace-in-file": "^6.3.5",    
    "typescript": "4.9.5"  
  },  
  "peerDependencies": {    
    "@angular/elements": "15.2.1"  
  }
}

tsconfig.json #

{  
  "compilerOptions": {    
    "baseUrl": "./",    
    "typeRoots": [      
      "../node_modules/@types"    
    ],    
    "types": ["node"]  
  }
}

使用process的代码片段 #

updateTask(
    key: string,
    paramsObject: obj,
    body: unknown = {}
): Observable<unknown> {
    const params = new HttpParams({ fromObject: paramsObject });
    return this.http.post(
        `${process.env['SERVICES_URL']}/task/${key}?`,
        body,
        { params }
    );
}

解决方案 #

1. 检查并修改tsconfig.app.json配置 #

Angular应用实际使用的是tsconfig.app.json（继承根目录tsconfig.json），需确保该文件中也添加了node类型：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ]
}

2. 确保dotenv-webpack配置生效 #

1. 在项目根目录创建webpack.config.js：

const Dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    new Dotenv()
  ]
};

2. 修改angular.json中的构建配置，指定自定义webpack文件：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 其他原有配置
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      }
    }
  }
}

3. 改用Angular官方环境变量方案（推荐） #

Angular内置了环境变量管理机制，无需依赖process.env：

1. 在src/environments/目录下定义环境文件：

// src/environments/environment.ts（开发环境）
export const environment = {
  production: false,
  SERVICES_URL: '你的开发环境API地址'
};

// src/environments/environment.prod.ts（生产环境）
export const environment = {
  production: true,
  SERVICES_URL: '你的生产环境API地址'
};

2. 在代码中导入并使用：

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

updateTask(
    key: string,
    paramsObject: obj,
    body: unknown = {}
): Observable<unknown> {
    const params = new HttpParams({ fromObject: paramsObject });
    return this.http.post(
        `${environment.SERVICES_URL}/task/${key}`,
        body,
        { params }
    );
}

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