构建应用程序时出现 Angular 18 和 SignalR 错误：[错误] 无法解析事件源中的“url”、“https”、“http”、“util”

Question

在 Angular 18 应用程序中，我需要添加实时技术。选择的技术是 SignalR，但我在添加包和成功构建时遇到了困难。该错误似乎与构建过程有关，可能是因为 Angular 不再使用 webpack。我不知道如何解决它。有什么想法吗？

我们可以通过创建示例 Angular 项目并添加 @microsoft/signalr 包来重新创建错误：

创建一个新的 Angular 项目

ng new angular-signalr

添加 SignalR 依赖项：

pnpm install @microsoft/signalr --save

创建 Angular 服务以连接到 SignalR

ng g service services/SignalR

添加 Signal R 导入和初始化代码：

import { Injectable } from '@angular/core';

import * as signalR from '@microsoft/signalr';

@Injectable({ providedIn: 'root' })
export class SignalRService
{
    #HubConnection: signalR.HubConnection;

    constructor() {
        this.#HubConnection = new signalR.HubConnectionBuilder()
            .withUrl('https://sample.signalr.mydomain.com')
            .build();
    }

    Init() {
        this.#HubConnection
            .start()
            .then(() => console.log('Connection started'))
            .catch(error => console.error('Error while starting connection: ' + error));
    }
}

注入要包含在构建中的 SignalR 服务并运行产品构建

import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { SignalRService } from './services/signal-r.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {

  #SignalRService = inject(SignalRService);

  title = 'angular-signalr';
}

运行生产构建：

ng build --configuration=production

并且会出现以下错误：

Application bundle generation failed. [3.228 seconds]

X [ERROR] Could not resolve "url"

    (disabled):node_modules/eventsource/lib/eventsource.js:1:20:
      1 │ var parse = require('url').parse;
        ╵                     ~~~~~

  The package "url" 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 "https"

    (disabled):node_modules/eventsource/lib/eventsource.js:3:20:
      3 │ var https = require('https');
        ╵                     ~~~~~~~

  The package "https" 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 "http"

    (disabled):node_modules/eventsource/lib/eventsource.js:4:19:
      4 │ var http = require('http');
        ╵                    ~~~~~~

  The package "http" 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 "util"

    (disabled):node_modules/eventsource/lib/eventsource.js:5:19:
      5 │ var util = require('util');
        ╵                    ~~~~~~

  The package "util" 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.

这是我的 Angular 项目版本 (ng --info)

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 18.0.3
Node: 20.14.0
Package Manager: npm 10.7.0
OS: win32 x64

Angular: 18.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.3
@angular-devkit/build-angular   18.0.3
@angular-devkit/core            18.0.3
@angular-devkit/schematics      18.0.3
@schematics/angular             18.0.3
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.7

Answer 1

这个问题已经记录在 github issues signalr 中，我们必须添加

"http", "https", "url", "util", "net"

才能使构建通过，然后我们可以添加“allowedCommonJsDependency”数组，该数组是可选的，可以消除一些构建警告。

    ...
    "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "externalDependencies": ["http", "https", "url", "util", "net"],
            "allowedCommonJsDependencies": [
              "tough-cookie",
              "node-fetch",
              "fetch-cookie",
              "abort-controller",
              "ws",
              "eventsource"
            ],
            ...

Stackblitz 演示