Angular 14升级报错：ReferenceError: process is not defined 求助

方案一：添加全局 process polyfill #

• 在项目 src 目录下创建或修改 polyfills.ts 文件，添加以下代码：

  // 模拟Node.js的process全局对象
  (window as any).process = {
    env: { NODE_ENV: 'production' }
  };
  

• 打开 angular.json，确认 build.options.polyfills 字段包含 src/polyfills.ts，确保该文件在构建时被加载。

方案二：通过Webpack DefinePlugin注入 process 变量 #

• 安装自定义Webpack构建工具：

  npm install @angular-builders/custom-webpack --save-dev
  

• 在项目根目录创建 webpack.config.js，添加配置：

  const webpack = require('webpack');
  
  module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify({ NODE_ENV: 'production' })
      })
    ]
  };
  

• 修改 angular.json 中的构建配置：

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

方案三：排查依赖兼容性 #

• 升级 twilio-client 到最新版本，确保其兼容Angular 14：

  npm update twilio-client
  

• 检查项目中其他依赖包，确认是否有依赖Node.js全局变量（如process）的情况，替换或升级这些依赖至支持Angular 14的版本。

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