Sharing Dependencies
Share Angular and libraries across remotes.
Why Share Dependencies
If the host and three remotes each bundle their own copy of Angular, the browser downloads Angular four times and, worse, ends up with multiple Angular instances that break dependency injection. Sharing ensures a single copy is loaded once and reused by everyone.
The shared Section
In federation.config.js, the shared object declares which dependencies are shared across host and remotes. Native Federation deduplicates them at runtime.
module.exports = withNativeFederation({
shared: {
...shareAll({ singleton: true, strictVersion: true }),
},
});All lessons in this course
- Micro Frontend Architecture
- Native Federation for Angular
- Sharing Dependencies
- Loading Remote Modules