Angular集成sockJS与STOMP时出现Module not found及global未定义报错

问题根本原因 #

你使用的stompjs@2.3.3版本同时兼容Node.js服务端和浏览器环境，Angular编译时会默认引入Node.js专属的net模块代码，浏览器环境没有该原生模块，因此触发找不到模块的报错。后续手动安装net包后出现global is not defined的报错，是因为net是Node.js专属模块，依赖Node.js的全局global对象，浏览器环境下该对象不存在。

另外你的业务代码存在一处逻辑错误：生成channelName的else分支中，拼接了两次nick2，会导致频道名错误，无法正常收发消息，需要一并修复。

可行解决方案 #

方案1：更换为维护中的STOMP客户端（推荐） #

原版stompjs已经停止维护多年，适配问题较多，建议直接更换为官方新一代STOMP客户端，从根源解决环境兼容问题：

1. 先清理错误依赖：

npm uninstall stompjs sockjs net

2. 安装正确的前端依赖：

npm install @stomp/stompjs sockjs-client
npm install --save-dev @types/sockjs-client

3. 修改chat.component.ts的导入和初始化逻辑：

// 替换原有stompjs导入
import { Client } from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';

// 修改connectToChat方法
connectToChat() {
  const id1 = this.thisUser.id!;
  const nick1 = this.thisUser.nickname;
  const id2 = this.otherUser?.id!;
  const nick2 = this.otherUser?.nickname!;

  // 修复频道名生成逻辑错误
  if (id1 > id2) {
    this.channelName = nick1 + '&' + nick2;
  } else {
    this.channelName = nick2 + '&' + nick1;
  }

  console.log('connecting to chat...');
  const socket = new SockJS(this.url + '/chat');
  // 新客户端初始化方式
  this.stompClient = new Client({
    webSocketFactory: () => socket,
    // 不需要调试日志可以注释下一行
    debug: (str) => console.log(str)
  });

  // 连接成功回调
  this.stompClient.onConnect = (frame) => {
    console.log('connected to: ' + frame);
    this.stompClient.subscribe('/topic/messages/' + this.channelName, (response) => {
      const data = JSON.parse(response.body);
      console.log(data);
    });
  };

  // 激活连接
  this.stompClient.activate();
}

修改完成后重新执行ng serve即可正常启动。

方案2：保留原版stompjs，添加环境适配 #

如果你不想更换依赖，可以通过添加polyfill和编译配置解决兼容问题：

1. 清理错误安装的net包：

npm uninstall net

2. 打开src/polyfills.ts，在文件末尾添加全局对象适配：

(window as any).global = window;

3. 打开根目录的package.json，新增browser配置项，告诉编译工具忽略Node.js专属模块：

{
  // 保留原有所有配置不变，新增以下字段
  "browser": {
    "net": false,
    "tls": false
  }
}

4. 修复chat.component.ts中频道名生成的逻辑错误后，重新执行ng serve即可正常启动。

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