Angular 19 Module Federation: Remote Module Load Fails with RouterModule LoadChildren

I’m working on a large monorepo project using NX and Angular 19, with multiple remotes configured through Angular’s Module Federation. This architecture allows us to split the application into smaller, independently deployable micro-frontends. Each remote represents a distinct feature module, dynamically loaded at runtime. The setup has been stable and working perfectly in Angular 14, both locally and in production. However, after updating to Angular 19, none of the routes pointing to remote modules work—they simply fail to load. Routes that are part of the main application (local routes) work as expected, but any attempt to navigate to a remote route results in an unresolved module or a silent failure. Debugging attempts suggest that the issue lies in how remote modules are being resolved by the router, but I haven’t been able to pinpoint the exact cause. Here’s a detailed breakdown of the issue:

Project Setup:

1. Command to Start the Application:

yarn nx serve app-admin --dev-remotes=remotes-app-admin-gift-registry


This starts the app-admin project and loads the remotes-app-admin-gift-registry remote.

1. App Module (app-admin):

The main route of app-admin is configured to load the remote module as follows:

RouterModule.forRoot([
{
path: '',
loadChildren: () =>
import('remotes-app-admin-gift-registry/Module').then(m => {
console.log('Imported remote module', m, m.RemoteEntryModule);
return m.RemoteEntryModule;
}),
canActivate: [AuthGuard, UserRoleGuard],
data: {
allowedRoles: [Role.SUPER_ADMIN, Role.ADMIN]
}
}
])

1. Remote Module Entry:

In remotes-app-admin-gift-registry, I have the following RouterModule configuration:

RouterModule.forChild([
{
path: '',
component: RemoteEntryComponent
}
])

1. Remote App Module:

The AppModule of remotes-app-admin-gift-registry contains:

RouterModule.forRoot([
{
path: '',
loadChildren: () =>
import('./remote-entry/entry.module').then(m => {
console.log('Imported remote entry module', m);
return m.RemoteEntryModule;
})
}
])


Debugging Steps Taken:

• I added a local module (TestModule) in app-admin with a simple route:

{
path: 'abc',
loadChildren: () =>
import('./test/test.module').then(m => {
console.log('Imported local module', m);
return m.TestModule;
})
}


This route works as expected, logging RouteConfigLoadEnd with the correct _loadedRoute object.

What I’ve Tried:

1. 
   Removing canActivate guards.
   
   
2. 
   Using loadRemoteModule: loadChildren: () => loadRemoteModule({ type: 'manifest', remoteName: 'remotes-app-admin-gift-registry', exposedModule: './Module' }).then(m => m.RemoteEntryModule), or loadChildren: () => loadRemoteModule('remotes-app-admin-gift-registry', './Module').then(m => m.RemoteEntryModule),
   
   
3. 
   Changing the route path from "" to a named route.
   
   
4. 
   Enabling enableTracing for router debugging.
   

Observations:

• The remote route does not generate a RouteConfigLoadEnd event.

• The local test module works as expected, suggesting the issue is specific to remote module loading.

What could be causing the remote module to fail to load in Angular 19 with Module Federation, despite it working in Angular 14? Are there additional configurations or debugging techniques I can try to resolve this issue?

Continue reading...