How to prevent style leakage between Microfrontend apps when using ViewEncapsulation.None in...

We have migrated our Angular applications into Microfrontends using Dynamic Module Federation (with @angular-architects/module-federation).

In each remote application, I imported a styles.css into app.component.css. However, the styles from styles.css were only applied to the AppComponent, not to other components.

To solve this, I set ViewEncapsulation.None in AppComponent, which allowed the styles to apply across the application.

However, a new issue appeared: when navigating between different Microfrontends, styles from the previous app remain active and leak into the new app.

How can I correctly apply global styles inside each Microfrontend without causing style leakage between apps during navigation?

What is the best practice for managing styles in Angular Microfrontends (using Dynamic Federation)?

Any advice or examples would be appreciated.

Note: I am using @angular-architects/module-federation, not plain Webpack federation.

Continue reading...