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! 💡💡💡
Top comments (0)