Native Federation continues to evolve. Based on valuable community feedback, versions 19 and 20 introduce several impactful – and sometimes non-obvious – improvements. These enhancements significantly boost developer experience (DX), optimize build performance, and resolve long-standing issues when integrating third-party npm packages.
The best part: just upgrade to a newer version, and everything will just work™.
In this article, we walk you through the key improvements and how they simplify real-world development with Native Federation.
Note: angular-architects/native-federation version 20 is fully compatible with Angular 19. Even if you haven’t upgraded Angular itself, you can still benefit from the latest improvements by updating the Native Federation package.
Several Examples with Component Libraries
For testing all our improvements and making sure they work together with several types of third-party libraries, we have created a demo repository with several Angular applications built with different famous Component libraries:
This is also a nice show case that tells us how to use Native Federation with:
- Angular Material
- Clarity
- Kendo UI
- AG Grid
- NG Bootstrap
- ng-zorro
- PrimeNG
If you think we can benefit from adding further libraries to this show case, please let us know.
Automatic Host Reloading When Remote Changes
One of the most requested features was automaticalls reloading the host application when a connected remote changes. Thanks to an awesome contribution of Alejandro Ramírez, Native Federation 20.0.7 addresses this challenge with automatic reload through Server-Sent Events (SSE).
If your host and your remotes are using this Native Federation 20.0.7 or higher in development mode (ng serve), you will automatically get this feature without further configuration. More details and background information on this can be found in Alejandro's article.
Optimizing the Amount of Shared Dependencies
Most people use the shareAll helper to make sure all dependencies found in the package.json are shared with other remotes at runtime. While this is a convinient way for configuring Native Federation (exhaustively listening all dependencies to share is indeed, well, exhaustive), it might lead to oversharing. This degrates build performance and leads to compilation errors when shareAll detects an npm package not indended to beeing used in the browser.
However, these issues could have also happened without shareAll when a package provided a huge amount of secondary entry points (such as date-fns) or entry points only indeded for the server-side.
These issues are solved by the new ignoreUnusedDeps feature. When activated, Native Federation scans your code to find out which packages and entry points are actually used. Everything else is skipped from compilation. For activating this feature, just add the following section to your federation.config.js:
features: {
ignoreUnusedDeps: true
}As ignoreUnusedDeps is quite a game changer in terms of performance and DX, this configuration section is automatically generated for new projects when running ng add or the init schematic. Big thanks to Rainer Hahnekamp whos open source project Sheriff helped us to implement this feature with very little efford.
This feature also brings some positive but unobvious improvements. Here is a full list:
- Improved build times (already discussed)
- Fewer issues with node packages that are in the (mono) repo but not used by the app in question (e.g. Node.js packages, already discussed too)
- Improved start-up times (smaller import map)
- A separate
tsconfig.federation.tswhich was created during the build is not needed anymore - Loading locales from
@angular/common/locales/*now works without workarounds, as now by default only used locales are loaded
Automatic Chunk Splitting
Since version 19.0.19, Native Federation automatically performance chunk splitting for shared dependencies (for the main application, Angular has always done this by default). This prevents code redundancies in the emitted bundles (e.g. when two shared packages have the same transient dependency) and issues with singletons (e.g. registries used for theming in UI libraries).
This resolves a larger class of show stoppers when sharing third party packages.
Covering Angular Features
In the previous versions, we also added support for Angular Features built-in to the CLI:
Running Native Federation and Module Federation Side-by-Side
If you want to move over to Native Federation gradually (e.g. because you want to use the CLI's new esbuild-based ApplicationBuilder), you can now mix and match Native Federation with Module Federation.
Summary
Native Federation has matured significantly in versions 19 and 20, addressing real-world feedback with practical, sometimes non-obvious improvements. From automatic host reloading to smarter dependency sharing with ignoreUnusedDeps, these changes not only enhance developer experience but also improve build performance and reliability—especially when working with complex third-party libraries. Automatic chunk splitting and full support for Angular CLI features like SSR and I18N round off a feature set that now feels both modern and robust.
If you haven't already, now is the time to upgrade to version 20—even if you're still on Angular 19. It’s designed to "just work™", and the migration effort is minimal. For hands-on insights and tested scenarios, check out our demo repo, which showcases compatibility with popular component libraries. Questions or suggestions? Let us know—we’re building this with the community, for the community.
