Angular 18集成SignalR构建报错：无法解析url/https/http/util

问题描述 #

在Angular 18项目中集成SignalR实时技术时，执行生产构建（ng build --configuration=production）会出现错误，提示无法解析url、https、http、util这些Node.js内置模块。原因是Angular 18默认采用ESBuild替代Webpack作为构建工具，ESBuild不会自动为浏览器环境提供Node内置模块的polyfill，而SignalR依赖的eventsource包引用了这些模块。

错误信息 #

Application bundle generation failed. [3.228 seconds]

X [ERROR] 无法解析 "url"

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

  包"url"未在文件系统中找到，但它是Node的内置模块。你是否尝试为Node打包？可以使用"platform: 'node'"来解决此错误。


X [ERROR] 无法解析 "https"

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

  包"https"未在文件系统中找到，但它是Node的内置模块。你是否尝试为Node打包？可以使用"platform: 'node'"来解决此错误。


X [ERROR] 无法解析 "http"

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

  包"http"未在文件系统中找到，但它是Node的内置模块。你是否尝试为Node打包？可以使用"platform: 'node'"来解决此错误。


X [ERROR] 无法解析 "util"

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

  包"util"未在文件系统中找到，但它是Node的内置模块。你是否尝试为Node打包？可以使用"platform: 'node'"来解决此错误。

重现步骤 #

1. 创建Angular项目：

ng new angular-signalr

2. 安装SignalR依赖：

pnpm install @microsoft/signalr --save

3. 生成SignalR服务：

ng g service services/SignalR

4. 在服务中添加SignalR导入与初始化代码：

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('连接已启动'))
            .catch(error => console.error('启动连接时出错: ' + error));
    }
}

5. 在根组件中注入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';
}

6. 执行生产构建：

ng build --configuration=production

解决方案 #

方案一：使用ESBuild Node模块polyfill插件 #

这是最简便的全局解决方案，一次性处理所有Node内置模块的polyfill：

1. 安装插件：

pnpm add -D @esbuild-plugins/node-modules-polyfill

2. 在项目根目录创建esbuild.config.js文件，内容如下：

const { NodeModulesPolyfillPlugin } = require('@esbuild-plugins/node-modules-polyfill');

module.exports = {
  plugins: [
    NodeModulesPolyfillPlugin()
  ]
};

3. 修改angular.json中的构建配置，指定ESBuild配置文件：
   找到architect.build.options，添加esbuildConfig字段：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      // 原有配置...
      "esbuildConfig": "esbuild.config.js"
    },
    // 其他配置...
  }
}

方案二：手动添加单个polyfill #

如果只想针对报错的模块单独处理：

1. 安装对应的浏览器polyfill包：

pnpm add -D url-browserify https-browserify http-browserify util

2. 修改tsconfig.json，添加路径别名映射：
   在compilerOptions中添加paths配置：

"compilerOptions": {
  // 原有配置...
  "paths": {
    "url": ["node_modules/url-browserify"],
    "https": ["node_modules/https-browserify"],
    "http": ["node_modules/http-browserify"],
    "util": ["node_modules/util"]
  }
}

3. （可选）若上述步骤仍报错，在angular.json的build.options.scripts中添加脚本引用：

"scripts": [
  "./node_modules/url-browserify/index.js",
  "./node_modules/https-browserify/index.js",
  "./node_modules/http-browserify/index.js",
  "./node_modules/util/util.js"
]

项目环境信息 #

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    
Angular CLI: 18.0.3
Node: 20.14.0
包管理器: npm 10.7.0
系统: win32 x64

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

依赖包版本
---------------------------------------------------------
@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

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