升级至Angular-6.x出现Uncaught ReferenceError: global/process未定义求助

看起来你遇到的是Angular 6+版本中Webpack配置变化导致的Node.js全局变量缺失问题——Angular 6开始使用Webpack 4，默认不再自动polyfill Node.js的全局对象（比如global、process），但你项目里依赖的socket.io-client、simple-peer这类库仍然在依赖这些变量，所以会抛出未定义的错误。

下面是两种可靠的解决方法，按推荐程度排序：

方法一：使用node-polyfill-webpack-plugin（推荐，一次性解决所有Node全局变量问题） #

这个插件会自动为你补充所有Node.js环境的polyfill，覆盖global、process以及其他可能用到的变量，适合依赖多个Node环境库的项目：

1. 安装必要的依赖：

npm install node-polyfill-webpack-plugin @angular-builders/custom-webpack --save-dev

2. 在项目根目录创建webpack.config.js文件，内容如下：

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

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

3. 修改angular.json文件，将默认的构建器替换为自定义Webpack构建器：
   找到architect下的build和serve配置，修改builder字段，并添加customWebpackConfig：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留你原有的其他build配置（比如outputPath、index、main等）
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留你原有的其他serve配置
    }
  }
}

4. 重启你的Angular开发服务器，错误应该就会消失了。

方法二：手动在polyfills.ts中添加全局变量模拟 #

如果不想引入额外插件，可以直接在项目的polyfill文件中手动模拟这些全局变量，确保它们在依赖库加载前就被定义：

1. 打开src/polyfills.ts文件，在末尾添加以下代码：

// 模拟Node.js的global对象
(window as any).global = window;

// 模拟Node.js的process对象（根据需要补充更多属性）
(window as any).process = {
  env: {
    DEBUG: false,
    // 如果你的库需要其他process.env属性，可以在这里添加
  },
  version: 'v16.0.0'
};

2. 重启开发服务器，验证错误是否解决。

为什么之前的方法没生效？ #

你之前尝试的创建虚拟global变量的方法可能是在组件或服务中添加的，这会导致变量定义的时机晚于依赖库的加载时间（比如socket.io-client在打包时会先加载），所以必须在polyfills.ts中添加——这个文件是Angular应用加载的第一个脚本，能确保全局变量在所有依赖库之前被定义。

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