Angular 15中WebSocket连接报错Uncaught ReferenceError: global is not defined求助

错误原因：Angular 15基于Webpack 5构建，Webpack 5不再默认提供Node.js环境的global全局变量，但StompJS/SockJS依赖该变量，因此触发报错。

以下是几种可行的解决方法：

方法一：手动注入global全局变量 #

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

(window as any).global = window;

2. 打开angular.json，找到build配置下的options.polyfills，将src/polyfills.ts加入数组：

"polyfills": [
  "zone.js",
  "src/polyfills.ts"
]

方法二：通过自定义Webpack配置补充全局变量 #

1. 安装自定义Webpack构建器依赖：

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

2. 在项目根目录创建webpack.config.js，写入配置：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      global: 'global',
    })
  ],
  resolve: {
    fallback: {
      global: require.resolve('global')
    }
  }
};

3. 修改angular.json中的构建配置：
   • 将builder从@angular-devkit/build-angular:browser替换为@angular-builders/custom-webpack:browser
   • 添加customWebpackConfig配置项：

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

方法三：升级依赖到适配Webpack 5的版本 #

卸载旧版Stomp/SockJS，安装最新适配版本：

npm uninstall stompjs sockjs-client
npm install @stomp/stompjs sockjs-client --save

然后在组件中更新导入语句：

import * as Stomp from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';

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