Angular 17集成Azure Web PubSub遇空白页及构建错误求助

核心问题分析 #

你遇到的process is not defined及Node内置模块（crypto、stream等）无法解析的错误，原因有两个：

1. 错误使用了服务端SDK：@azure/web-pubsub是针对Node.js环境的服务端包，依赖大量Node内置模块，浏览器环境不支持这些模块。
2. Angular 17默认使用ESBuild构建工具，而非传统Webpack，之前针对Webpack的配置方案完全不适用。

具体解决步骤 #

1. 替换为浏览器专用SDK #

卸载服务端SDK，安装Azure Web PubSub官方浏览器客户端包：

npm uninstall @azure/web-pubsub
npm install @azure/web-pubsub-client

2. 调整客户端代码 #

修改app.component.ts中的代码，使用浏览器SDK的API（示例）：

import { Component, OnInit } from '@angular/core';
import { WebPubSubClient } from '@azure/web-pubsub-client';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  async ngOnInit() {
    // 替换为你的Azure Web PubSub客户端访问URL（需从服务端生成）
    const client = new WebPubSubClient('https://<your-pubsub-name>.webpubsub.azure.com/client/hubs/<hub-name>?access_token=<token>');
    
    // 订阅目标组的消息
    const group = client.group('notification-group');
    await group.subscribe({
      message: (msg) => {
        console.log('收到推送通知:', msg.data);
        // 这里添加你的消息处理逻辑
      }
    });
    
    // 启动连接
    await client.start();
  }
}

3. 配置ESBuild以解决剩余全局变量问题 #

如果仍出现process is not defined错误，需配置ESBuild的polyfill：

1. 安装必要的polyfill包：

npm install @esbuild-plugins/node-globals-polyfill process --save-dev

2. 修改angular.json中的构建配置：
   找到projects -> <your-project-name> -> architect -> build -> options，添加esbuildOptions：

"esbuildOptions": {
  "plugins": [
    {
      "name": "@esbuild-plugins/node-globals-polyfill",
      "options": {
        "process": true,
        "buffer": true
      }
    }
  ]
}

同时在architect -> serve -> options中添加相同的esbuildOptions，确保开发环境生效。

3. 创建/修改src/polyfills.ts文件：

import 'process';
(window as any).process = process;

并在angular.json的build -> options中添加：

"polyfills": ["src/polyfills.ts"]

验证 #

完成上述配置后，重新启动项目：

ng serve

此时应能正常连接Azure Web PubSub并接收推送通知，无Node模块相关报错。

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