Enhanced Native Federation: Faster Builds, Better DX, Streamlined Workflows

Native Federation keeps advancing. Drawing on feedback from the community, versions 19 and 20 introduce a number of meaningful—and occasionally surprising—upgrades. These changes noticeably improve developer experience (DX), speed up builds, and fix persistent problems with integrating third-party npm packages.

The simplest part? Update to a newer release and it all just works™.

This article breaks down the main improvements and shows how they simplify practical development with Native Federation.

Note: angular-architects/native-federation version 20 is fully compatible with Angular 19. Even if you haven't moved to a newer Angular version, upgrading the Native Federation package alone still gives you the benefits of these latest enhancements.

Demo Repository with Component Libraries

To validate all our improvements and confirm they work with various third-party libraries, we put together a demo repository containing several Angular applications built on well-known component libraries:

Demo Repo

This setup also serves as a useful reference for working with Native Federation alongside:

  • Angular Material
  • Clarity
  • Kendo UI
  • AG Grid
  • NG Bootstrap
  • ng-zorro
  • PrimeNG

If additional libraries would add value to this showcase, feel free to reach out with suggestions.

Host Auto-Reload on Remote Changes

A frequently requested capability was reloading the host application automatically whenever a connected remote updates. Thanks to a solid contribution from Alejandro Ramírez, Native Federation 20.0.7 delivers this through Server-Sent Events (SSE).

When both the host and its remotes run Native Federation 20.0.7 or higher in development mode (ng serve), the feature activates with no extra setup. Technical details and the reasoning behind it are covered in Alejandro's article.

Right-Sizing Shared Dependencies

The shareAll helper is a common choice for sharing every dependency listed in package.json with remotes at runtime. While it's a handy way to configure Native Federation (listing all dependencies manually is genuinely tiring), it can result in oversharing. That leads to slower builds and compile failures when shareAll encounters a package not designed for the browser.

Still, similar problems could arise even without shareAll if a package exposed numerous secondary entry points (for instance, date-fns) or entry points intended only for server-side use.

The new ignoreUnusedDeps option resolves these concerns. When enabled, Native Federation analyzes your source to determine which packages and entry points are genuinely referenced. Everything else is left out of the build. Activate it by adding the snippet below to federation.config.js:

features: {
  ignoreUnusedDeps: true
}

Given how much ignoreUnusedDeps transforms both performance and DX, this configuration is now generated by default for fresh projects when using ng add or the init schematic. Many thanks to Rainer Hahnekamp, whose project Sheriff made implementing this feature straightforward.

This addition also yields several positive but less obvious outcomes:

  • Reduced build durations (as noted above)
  • Fewer complications with packages residing in the (mono) repo but unused by the given app (e.g. Node.js packages, also mentioned previously)
  • Quicker startup times via a smaller import map
  • The separate tsconfig.federation.ts created during builds is no longer required
  • Loading locales from @angular/common/locales/* now functions without workarounds, since only in-use locales are loaded by default

Built-in Chunk Splitting

Starting with version 19.0.19, Native Federation handles chunk splitting for shared dependencies automatically (the main app already benefited from Angular's default behavior). This eliminates redundant code across emitted bundles (for example, when two shared packages pull in the same transitive dependency) and fixes singleton issues (such as theming registries in UI libraries).

This change removes a sizable category of blockers when sharing third-party packages.

Support for Angular CLI Features

Recent versions also added compatibility with built-in Angular CLI capabilities:

Using Native and Module Federation Together

If a gradual migration to Native Federation fits your approach (for instance, to leverage the CLI's new esbuild-based ApplicationBuilder), you can now combine Native Federation with Module Federation.

Wrap-Up

Native Federation has come a long way in versions 19 and 20, turning community insights into practical, sometimes unexpected enhancements. From host auto-reloading to smarter dependency management through ignoreUnusedDeps, these updates elevate DX while improving build efficiency and stability—particularly with complex third-party libraries. Automatic chunk splitting plus full backing for Angular CLI features like SSR and I18N round out a toolkit that now feels both contemporary and dependable.

If you're still on an older release, upgrading to version 20 is worth it now—even with Angular 19 in place. It's built to "just work™", with minimal migration overhead. For concrete examples and tested configurations, check out our demo repo highlighting compatibility with major component libraries. Have feedback or ideas? We'd love to hear them—this is a community effort.