Getting "ChunkLoadError" for Lazy Loaded Modules in Angular v18 Microfrontend Application

[KSE0475]

For which library do you need help?

module-federation

Question

We encounter "ChunkLoadError" for a few lazy-loaded modules(modules in the host app) when serving the application locally and in the prod environment.

Environments

• Angular Version: ~18.2.2
• 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"

App Routing Module Configuration

const appRoutes: Routes = [
  {
   path: 'dashboard',
   loadChildren: () =>
     import('./main/content/dashboard/dashboard.module').then((d) => d.DashboardModule),
  },
  {
   path: ':contentId/users',
   loadChildren: () =>
     import('./main/content/users/users.module').then((d) => d.UserModule),
  },
  {
   path: ':contentId/facilities',
   loadChildren: () =>
     import('./main/content/facilities/facilities.module').then((d) => d.FacilitiesModule),
  },
  {
   path: ':contentId/infra',
   loadChildren: () =>
     import('./main/content/infra/infra.module').then((d) => d.InfraModule),
  },
  {
   path: ':contentId/analytics',
   loadChildren: () =>
     import('./main/content/analytics/analytics.module').then((a) => a.AnalyticsModule),
  }
];

• These routes load correctly: /dashboard, /analytics, /infra
• These routes throw a ChunkLoadError: /users, /facilities

Error details
For the failing routes (/users, /facilities), we see the following error in the browser console:

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

What configurations or steps are we missing to fix the "ChunkLoadError" for these lazy-loaded modules?

If you need additional configurations or files, I can share them. Need your urgent support!

Thank you in advance for your help!

[KSE0475]

This is the webpack.config.js file content of our host application:

const mf = require('@angular-architects/module-federation/webpack');
const path = require('path');
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, 'src/tsconfig.app.json'), [
  /* mapped paths to share */
]);

module.exports = {
  output: {
    uniqueName: 'sampleAppName',
    publicPath: 'auto',
    scriptType: 'text/javascript',
  },
  optimization: {
    runtimeChunk: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  experiments: {
    outputModule: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      library: { type: 'module' },

      name: 'document360',

      // For hosts (please adjust)
      remotes: {
        // @todo Use baseUrl from environment variable
        sampleMfe: 'sampleMfe@https://cdn.samplebaseURL.net/static/mfe/sample/remoteEntry.js',
      },

      shared: share({
        '@angular/core': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '>=18.2.0 <19.0.0',
          eager: true,
          includeSecondaries: true,
        },
        '@angular/common': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '>=18.2.0 <19.0.0',
          eager: true,
          includeSecondaries: true,
        },
        '@angular/common/http': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '>=18.2.0 <19.0.0',
          eager: true,
          includeSecondaries: true,
        },
        '@angular/router': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '>=18.2.0 <19.0.0',
          eager: true,
          includeSecondaries: true,
        },

        ...sharedMappings.getDescriptors(),
      }),
    }),
    sharedMappings.getPlugin(),
  ],
};

[KSE0475]

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

"@microsoft/signalr": "^8.0.7"

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

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

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, 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.