In an Angular 18 application, I need to add real-time technology. The chosen technology is SignalR, but I’m having trouble adding the package and getting a successful build. It seems the error is related to the build process, possibly because Angular is no longer using webpack. I don’t know how to fix it. Any thoughts?

We can recreate the error by creating a sample Angular project and adding the @microsoft/signalr package:

Create a new Angular project

ng new angular-signalr

Add SignalR dependency:

npm install @microsoft/signalr --save

Create a Angular Service to connect to SignalR

ng g service services/SignalR

Add Signal R import and init code:

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));
    }
}

Inject the SignalR service to be included in build and run a prod build

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';
}

Run a production build:

ng build --configuration=production

And the following error will occour:

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.

This are my Angular project version (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