One Copy to Rule Them All: Sharing Third-Party Libraries in Nx Micro Frontends

[MyrinNew]

When building Angular micro frontends (MFEs), one of the biggest challenges is managing third-party libraries.


Frameworks like @angular/core, UI kits like @angular/material, state management tools like @ngrx/store, and utility libraries like lodash often end up repeated across multiple MFEs. Without proper sharing, each app bundles its own copy, leading to heavier builds and more complex dependency management.


Nx with Webpack Module Federation gives us an elegant solution: shared singleton libraries.


The Problem

Imagine three MFEs: Dashboard, Reports, and Admin.

Each one depends on:

• @angular/core
• @ngrx/store
• lodash

If every app bundles its own versions, you risk:

• Duplicate dependencies inflating bundle size
• Version conflicts if apps don’t align
• Debugging headaches from mismatched library behavior

The Solution: Shared Singletons

Nx allows you to configure libraries as singletons in your webpack.config.js:






const { withModuleFederation } = require('@nrwl/angular/module-federation');

module.exports = withModuleFederation({
name: 'dashboard',
exposes: {
'./Module': './apps/dashboard/src/app/remote-entry/entry.module.ts',
},
shared: {
'@angular/core': { singleton: true, strictVersion: true, requiredVersion: '17.0.0' },
'@angular/common': { singleton: true, strictVersion: true, requiredVersion: '17.0.0' },
'@angular/router': { singleton: true, strictVersion: true, requiredVersion: '17.0.0' },
'@ngrx/store': { singleton: true, strictVersion: true },
'lodash': { singleton: true },
},
});








What these options mean

• singleton: true → Ensures only one instance of the library exists across all MFEs.
• strictVersion: true → Enforces the same version everywhere, avoiding subtle runtime bugs.
• requiredVersion: 'x.y.z' → Pins the version you expect, giving better control over updates.

Advantages of Shared Libraries

1. Consistency Across MFEs
   Every micro frontend uses the same version of Angular, NgRx, or lodash. No more “works here but not there” surprises.
2. Simpler Maintenance
   Updates to third-party libraries happen in one place. Teams don’t need to manually align versions across MFEs.
3. Reduced Complexity
   Shared singletons eliminate issues like multiple Angular injectors or conflicting NgRx stores.
4. Smoother Developer Experience
   With Nx, libraries are defined once and reused everywhere, making project setup faster and less error-prone.

Conclusion

By configuring third-party libraries as shared singletons, Nx makes micro frontends more consistent, maintainable, and reliable. Instead of juggling multiple versions of Angular or duplicating libraries, your MFEs behave like parts of one cohesive system.




More...