Ошибка Angular 18 и SignalR при создании приложения: [ОШИБКА] Не удалось разрешить «url», «https», «http», «util» из источника событий

В приложении Angular 18 мне нужно добавить технологию реального времени. Выбрана технология SignalR, но у меня возникли проблемы с добавлением пакета и получением успешной сборки. Похоже, ошибка связана с процессом сборки, возможно, потому, что Angular больше не использует веб-пакет. Я не знаю, как это исправить. Есть предположения?

Мы можем воссоздать ошибку, создав образец проекта 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';

//Same error when importing this way
//import { HubConnectionBuilder, HubConnection } 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();

        //Same error when instantiating this way
        // this.#HubConnection = new HubConnectionBuilder()
        //  .withUrl('https://sample.signalr.mydomain.com')
        //  .build();
    }

    Init()
    {
        this.#HubConnection
            .start()
            .then(() => console.info('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