Angular + Module Federation remote import modules 👷‍♀️

When implementing Module Federation in Angular (specifically using the library @angular-architects/module-federation) you need to be careful of what modules you are importing in your remotes. Some of these will break the application, but the error handling can be spotty and unclear. This can also be affected by what you share between your shell and your remotes.

Here's what I've found to be some best practices.

Remove these from your remote modules:
BrowserAnimationsModule
BrowserModule
RouterModule.forRoot()

Instead you can use:
CommonModule
RouterModule.forChild()

Targeting forChild with your RouterModule will ensure your shell's router outlet is being used.

---

This next one is a little different, and will depend on your use case:

Whether you put the HttpClientModule in your remote modules will be dependent if you are using Http Interceptors and how you are using them.

If you are wanting to use a global interceptor in your shell project (Ex. A loading bar or spinner that fires on every API call regardless of whether or not it is in the shell or remote) then you should NOT use HttpClientModule in your remote project. If you have a HttpClientModule in a remote, it will ignore the shell's HttpClientModule in favor for the remote's. There could be a use case for this, so just be aware of what your needs are when importing this module.

If you have any questions or anything you'd like me to add, please comment down below! 💡💡💡

Comments

[LAKSHMA REDDY]

Hi, 
I have two interceptors where I have to invoke the remote app interceptor if I make any API call from the remote app, but it's not invoking. In my remote app, I have a module called remote module. Since I have added interceptors in providers, I am able to call the remote app from the host application, but remote interceptors are not calling. can you give any suggestion

[Julie Gladden]

Hi! Do you think you could give me some more details?

From what I can tell so far, and correct me if I'm wrong:
You have host interceptors that are global, that are intercepting for both the host and remote.
The remote also has its own interceptor, but it's not intercepting?

[max]

Yep, I have the same issue I have a remote interceptor but it's not executing.

[Julie Gladden]

Hey, Max. If you give me some more details I might be able to help. Do you have the HttpClientModule imported in your remote?

[max]

Hey. Yes, so technically I have a Shell application and the MFE application. Shell application consumes it's own API, MFE application consumes it's own API. So I want the MFE application has it's own HttpClientModule and interceptor for authentication, but when I implemented it, it's not getting called but instead it's using the HttpClient from the Shell application every time I'm trying to do anything.

[Julie Gladden]

Are you sharing dependencies for @angular/common/http in your webpack.config.ts in both the shell and remote?

[max]

sorry, missed your reply.
Yes, both my shell and mfe applications have this in the webpack.config
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' })
}