Angular Academy · Lesson

Sharing Dependencies

Share Angular and libraries across remotes.

Sharing Dependencies is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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 }),
  },
});

shareAll Helper

shareAll() shares every dependency in your package.json with one configuration, the common starting point. You can then override specific packages.

shared: {
  ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}

singleton: Why It Matters for Angular

singleton: true forces exactly one instance of a package across the whole app. Angular core, RxJS, and the router MUST be singletons; two copies of @angular/core mean two injector trees and runtime errors.

Version Negotiation

When remotes request different versions, federation picks a compatible one. strictVersion: true throws on incompatibility instead of silently loading a mismatched version, surfacing problems early.

shared: {
  '@angular/core': { singleton: true, strictVersion: true, requiredVersion: '^18.0.0' },
}

Sharing Your Own Libraries

A shared design-system or auth library should also be a singleton so state (like the current user) is consistent. Share it explicitly by name.

shared: {
  '@myorg/design-system': { singleton: true, requiredVersion: 'auto' },
  '@myorg/auth': { singleton: true },
}

requiredVersion: auto

requiredVersion: 'auto' reads the version from your package.json so you do not hardcode it. This keeps the config in sync as you upgrade dependencies.

What Happens at Runtime

Each build emits metadata about its shared packages. At load time, federation compares versions across host and remotes and serves one shared module via the import map, so the browser fetches it a single time.

The Cost of Not Sharing

Forgetting to share Angular is the classic mistake: the app appears to work, then throws cryptic errors like "NG0203: inject() must be called from an injection context" because two Angular copies exist. Sharing as singleton prevents this.

Keeping Versions Aligned

Independent deploys can drift apart. Teams should agree on a shared range for framework packages and upgrade in coordination, because a host on Angular 18 cannot safely share with a remote needing Angular 17.

Skipping a Shared Package

Occasionally a remote needs its own isolated copy of a small utility. You can exclude it from sharing so it bundles privately, accepting the duplicate size in exchange for independence.

shared: {
  ...shareAll({ singleton: true }),
}
// skip a package by removing it from the shared map / excluding it

Quick Check

Which packages must be singletons?

Recap

Declare shared dependencies (often via shareAll) so host and remotes load one copy. Make framework and stateful libraries (@angular/core, router, RxJS, your auth lib) singleton: true; use strictVersion and requiredVersion: 'auto' to catch drift. Forgetting to share Angular causes DI errors.

Frequently asked questions

Is the “Sharing Dependencies” lesson free?

Yes — the full text of “Sharing Dependencies” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Sharing Dependencies”?

Share Angular and libraries across remotes. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Sharing Dependencies” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy