Angular Module Federation: How to configure isolated routing for each remote module?

30 viewsangularwebpack module federation
0

I would like to implement an isolated routing for each remote module
of a Webpack Module-Federation Angular application.

Each remote has its own routing module, but depending on the URL
passed to router.navigate or routerLink, a remote can override also the base URL which should be exclusively in charge of the host/shell application.

E.g.

  • shell is exposed at localhost:4200
  • remote-a is exposed at localhost:4201
  • remote-b is exposed at localhost: 4202
  • remote-a is imported by the shell and exposed at localhost:4200/remote-a
  • remote-b is imported by the shell and exposed at localhost:4200/remote-b.

What I want:

  • each app routing should work both as standalone and as remote;
  • remote-a should not be able to alter its base URL localhost:4200/remote-a when used as a remote;
  • remote-b should not be able to alter its base URL localhost:4200/remote-b when used as a remote;

How can we limit the behaviour of each remote module routing so that it is only able to perform navigation relatively to its own paths,
without allowing it to interfere with the other remotes and the shell/host application?

Update

Based on some articles I found

it seems that the closer solution could be as follows:

If your Micro Frontend brings its own router, you need to tell your shell that the Micro Frontend will append further segments to the URL. For this, you can go with the startsWith matcher also provided by @angular-architects/module-federation-tools:

import { 
    startsWith, 
    WebComponentWrapper, 
    WebComponentWrapperOptions 
} 
from '@angular-architects/module-federation-tools';

[...]

export const APP_ROUTES: Routes = [
    [...]
    {
        matcher: startsWith('angular3'),
        component: WebComponentWrapper,
        data: {
            [...]
        } as WebComponentWrapperOptions
    },
    [...]
}

To make this work, the path prefix angular3 used here needs to be used by the Micro Frontend too. As the routing config is just a data structure, you will find ways to add it dynamically.

Could you explain further how this solution works and if it could meet my requirements?