Angular 17 Webpack 空白页面错误“Uncaught ReferenceError：进程未在 node_modules/util/util.js 中定义”

Question

我正在尝试在我的 Angular 17 项目中实现 Azure Web pubsub 来发送和接收推送通知。

我已完成以下操作：

npm i @azure/web-pubsub
npm i ws

这是我的 app.component.js

import { Component, Inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from './navbar/navbar.component';
import { HomepageComponent } from './homepage/homepage.component';
import { AzureKeyCredential, WebPubSubServiceClient } from '@azure/web-pubsub';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, NavbarComponent, HomepageComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  ngOnInit(): void {
    this.subscribeNotification();
  }

  cred = new AzureKeyCredential(<AccessKey>);
  endpoint = Endpoint
  
  async subscribeNotification() {
    const serviceClient = new WebPubSubServiceClient(this.endpoint, this.cred, 'pubsub');
    let token = await serviceClient.getClientAccessToken();
    let ws = new WebSocket(token.url);
    ws.onmessage = function (e) {
      var server_message = e.data;
    }
  };

}

当我启动项目时，我得到一个空白页面，屏幕截图中出现错误控制台错误

当我尝试构建时出现此错误

X [ERROR] Could not resolve "crypto"

    node_modules/jsonwebtoken/node_modules/jwa/index.js:3:21:
      3 │ var crypto = require('crypto');
        ╵                      ~~~~~~~~

  The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


X [ERROR] Could not resolve "stream"

    node_modules/jsonwebtoken/node_modules/jws/lib/data-stream.js:3:21:
      3 │ var Stream = require('stream');
        ╵                      ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


X [ERROR] Could not resolve "stream"

    node_modules/jsonwebtoken/node_modules/jws/lib/sign-stream.js:5:21:
      5 │ var Stream = require('stream');
        ╵                      ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


X [ERROR] Could not resolve "stream"

    node_modules/jsonwebtoken/node_modules/jws/lib/verify-stream.js:5:21:
      5 │ var Stream = require('stream');
        ╵                      ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


X [ERROR] Could not resolve "crypto"

    node_modules/jsonwebtoken/sign.js:12:65:
      12 │ ...KeyObject, createSecretKey, createPrivateKey } = require('crypto')
         ╵                                                             ~~~~~~~~

  The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


X [ERROR] Could not resolve "crypto"

    node_modules/jsonwebtoken/verify.js:9:62:
      9 │ ... {KeyObject, createSecretKey, createPublicKey} = require("crypto");
        ╵                                                             ~~~~~~~~

  The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

如果我删除上面的所有代码，我就不会收到错误并且工作正常。

我已经遵循了本教程https://madhuwanthiaah.medium.com/send-angular-web-push-notification-with-azure-web-pub-sub-6eb38cf4b44f但是帖子末尾的脚本不不适合我。路径不存在：node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js

我也尝试过这个答案https://stackoverflow.com/questions/67572355/webpack-5-angular-polyfill-for-node-js-crypto-js/69212673但它是针对角度12端的不为我工作。我也遇到同样的错误。

知道如何解决这个问题吗？

Answer 1

我尝试了以下代码，使用 Angular 17 从 Azure Webpubsub 发送和接收推送通知。

代码：

publish.component.ts：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { WebPubSubService } from '../../services/web-pubsub.service';

@Component({
  selector: 'app-publish',
  templateUrl: './publish.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule]
})
export class PublishComponent {
  message: string = '';
  constructor(private webPubSubService: WebPubSubService) {}
  async publish(): Promise<void> {
    await this.webPubSubService.publishMessage(this.message);
  }
}

publish.component.html：

<div>
    <input [(ngModel)]="message" placeholder="Enter your message">
    <button (click)="publish()">Publish</button>
  </div>

订阅.component.ts：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WebSocketService } from '../../services/websocket.service';
import { WebPubSubService } from '../../services/web-pubsub.service';

@Component({
  selector: 'app-subscribe',
  templateUrl: './subscribe.component.html',
  standalone: true,
  imports: [CommonModule]
})
export class SubscribeComponent implements OnInit, OnDestroy {
  constructor(
    private webSocketService: WebSocketService,
    private webPubSubService: WebPubSubService
  ) {}
  async ngOnInit(): Promise<void> {
    const url = await this.webPubSubService.getClientAccessToken();
    this.webSocketService.connect(url);
  }
  ngOnDestroy(): void {
    this.webSocketService.disconnect();
  }
}

subscribe.component.html：

<div>
    <p>Subscribed to Web PubSub and received messages.</p>
  </div> 

app.component.ts：

import { Component } from '@angular/core';
import { PublishComponent } from './components/publish/publish.component';
import { SubscribeComponent } from './components/subscribe/subscribe.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [PublishComponent, SubscribeComponent]
})
export class AppComponent {
  title = 'angular-web-pubsub';
}

app.component.html：

<div style="text-align:center">
  <h1>
    Welcome to Angular Web PubSub!
  </h1>
</div>
<app-publish></app-publish>
<app-subscribe></app-subscribe>

环境.ts：

export const environment = {
    production: false,
    webPubSubConnectionString: '<WebPubSub_conne_string>'   };

package.json：

  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/ssr": "^17.3.7",
    "@azure/web-pubsub": "^1.1.1",
    "express": "^4.18.2",
    "ngx-websocket": "^0.4.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "ws": "^8.17.0",
    "zone.js": "~0.14.3"
  },

输出：