Serving styles and assets with Webpack 5 module federation

Question

I've successfully implemented the relatively new webpack 5 module federation system in my Angular 11 app, so it can load modules remotely on-demand from another build.

One thing I've found nothing about is how to handle assets like stylesheets and images. For example, there's a menu element in the federated module that requires its own styles:

• Putting them in the component's stylesheet bloats the chunks and the compiler complains about that, plus they're not loaded until the menu is shown
• If the styles are instead on the federated module's global stylesheet, they don't get loaded at all, because I'm requesting a sub-module and not the main one (I presume)
• The style is specific to the federated module, so it can't be put in the loader application

I suppose that the styles could be compiled and put in the federated module's build assets, but that'd break links when it's used with and without federation.

I'm still experimenting with this, but I thought it'd be good to ask. Anybody had this issue?

Answer 1

I think the most elegant way to achieve that would be to import your global styles.scss of the micro frontend into it's entry module component.scss and in your entry module component.ts set encapsulation: ViewEncapsulation.None in order to break style encapsulation for it, which will in turn lead for that styles to be applied globally.