Shell tries to load remote module from wrong port ("cannot match any routes")

Question

I have the following issue, briefly described in the below image:

The shell appolication has 2 mfe's as follows (module-federation.config.js):

 const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

 module.exports = {
   name: 'shell',
   remotes: ['mfe1', 'mfe2'],
   plugins: [...],
 };

The mfe's are loaded into different divs in the shell's screen, on the root route (app.routes.ts):

     export const appRoutes: Route[] = [
       {
         path: '',
         outlet: 'mfe1',
         loadChildren: () =>
           import('mfe1/Module').then(m => m.RemoteEntryModule),
       },
       {
         path: '',
         outlet: 'mfe2',
         loadChildren: () =>
           import('mfe2/Module').then(m => m.RemoteEntryModule),
       },
     ];

mfe1, configured to be served through http://localhost:4201 in its' project.json, has a nested lazy-loaded route within it's tree. The route is defaultly loaded with redirectTo, although, the problem persists also without the redirectTo part. (mfe-nested-module.routes.ts):

 export const mfe1Routes: Route[] = [
   {
     path: '',
     component: Mfe1MainPage,
     children: [
       {
         path: 'nested-route',
         loadChildren: () =>
           import('./modules/nested/nested.module').then(
             m => m.NestedModule
           ),
       },
       {
         path: '',
         redirectTo: '/nested-route',
         pathMatch: 'full',
       },
     ],
   },
 ];

...mfe1 shows the page as expected when accessing it through the reomote port (4201), same goes with mfe2, but the shell tries to load the remote nested module (NestedModule) from the wrong port.

What am I doing wrong?

Thanks!

Is it possible to create a smal reproducible example of it in github? — yurzui, Aug 22 '23 at 08:43

score 1 · Accepted Answer · answered Aug 27 '23 at 14:18

   {
     path: '',
     redirectTo: '/nested-route', // <--- This line
     pathMatch: 'full',
   },

This should be nested-route instead of /nested-route. Obviously, had nothing to do with my module federation config.

I guess that the shell's routing mechanism loops through all of its' microfrontends in order to find the right remote route and navigate accordingly (http://localhost:4200/(mfe1:nested-route)). With that theory in mind, it throws the error with the last remote module in that loop. That led me to believe the problem has something to do with my host-to-remote configuration, when actually it's just a typical (and quite common) Angular routing mistake...

:-)

Shell tries to load remote module from wrong port ("cannot match any routes")

1 Answers1