(Angular 18) Getting "ChunkLoadError" when using signalr with ngx-build plus

Environments

• Angular Version: ~18.2.2
• Signalr: @microsoft/signalr: "^8.0.7"
• Microfrontend Library: @angular-architects/module-federation: 18.0.4
• Webpack: 5.94.0
• Webpack-cli: ^5.1.4
• ngx-build-plus: 18.0.0
• Build -> "builder": "ngx-build-plus:browser"
• Serve -> "builder": "ngx-build-plus:dev-server"

The Error

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


Click here for Error image

Which lines are causing the issue?

After thoroughly investigated the issue and identified the root cause. The following lines of code were the primary contributors to the problem:

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

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


What did i try?

When these lines are commented out, the program runs without errors. However, these lines are essential for establishing a connection with SignalR, so they cannot be omitted. In few other similar issues that were closed in Github, it was recommended to use signalr version 8 to fix this issue. We are using v8 but still this issue is not fixed.

Interestingly, this works perfectly with the @angular-devkit/build-angular builder but encounters issues when used with ngx-build-plus. At this point, the exact reason for the incompatibility is unclear. We will need further analysis or expert guidance to resolve this while retaining SignalR functionality.

Continue reading...