Angular 18 搭配SignalR与ngx-build-plus时出现ChunkLoadError问题求助

问题背景 #

使用ngx-build-plus构建集成SignalR的Angular微前端项目时，出现ChunkLoadError，注释SignalR核心代码后项目恢复正常，但使用官方@angular-devkit/build-angular构建无此异常。

环境信息 #

• Angular版本: ~18.2.2
• SignalR: @microsoft/signalr: "^8.0.7"
• 微前端库: @angular-architects/module-federation: 18.0.4
• Webpack: 5.94.0
• Webpack-cli: ^5.1.4
• ngx-build-plus: 18.0.0
• 构建配置: "builder": "ngx-build-plus:browser"
• 启动配置: "builder": "ngx-build-plus:dev-server"

报错信息 #

Error: ChunkLoadError: Loading chunk <chunk-name> failed.  
(missing: <URL>)

问题定位 #

SignalR相关代码触发该错误：

import { HubConnectionBuilder } from '@microsoft/signalr';

this._hubConnection = new HubConnectionBuilder()
  .withUrl(this.apiUrl, {})
  .withAutomaticReconnect([0, 1000, 5000, null])
  .build();

已尝试方案 #

• 注释SignalR代码后项目正常运行，但该代码为核心功能无法省略
• 升级SignalR至v8，问题未解决
• 使用官方@angular-devkit/build-angular构建无异常

可行解决方案 #

方案1：强制SignalR打包进指定chunk #

在项目根目录创建extra-webpack.config.js，添加Webpack配置：

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        signalr: {
          test: /@microsoft\/signalr/,
          name: 'signalr',
          enforce: true,
          priority: 10
        }
      }
    }
  }
};

然后在angular.json的构建配置中引用该文件：

"builder": "ngx-build-plus:browser",
"options": {
  "extraWebpackConfig": "./extra-webpack.config.js",
  // 保留原有其他配置
}

方案2：配置模块联邦共享SignalR #

在模块联邦的webpack.config.js中，将SignalR列为共享依赖：

shared: {
  '@microsoft/signalr': {
    singleton: true,
    requiredVersion: '^8.0.7'
  },
  // 保留原有其他共享配置
}

方案3：临时禁用chunk优化（仅用于排查） #

在angular.json的构建选项中关闭优化：

"options": {
  "optimization": false,
  // 保留原有其他配置
}

注意：此方案仅适合排查问题，生产环境建议使用方案1或2。

原理说明 #

ngx-build-plus的Webpack chunk分割策略与官方builder存在差异，导致SignalR的依赖被错误拆分到独立chunk中，触发加载失败。通过强制指定SignalR的chunk归属或配置共享依赖，可避免该异常。

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