Angular Academy · Lektion

Abhängigkeiten gemeinsam nutzen

Angular und Bibliotheken über Remotes hinweg gemeinsam nutzen

Abhängigkeiten gemeinsam nutzen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Abhängigkeiten teilen

Wenn der Host und drei Remotes jeweils eine eigene Kopie von Angular bündeln, lädt der Browser Angular viermal. Noch problematischer ist, dass dadurch mehrere Angular-Instanzen entstehen, die die Dependency Injection beschädigen. Durch das Teilen wird eine einzige Kopie einmal geladen und von allen wiederverwendet.

Der Abschnitt shared

In federation.config.js legt das Objekt shared fest, welche Abhängigkeiten von Host und Remotes gemeinsam genutzt werden. Native Federation entfernt Duplikate zur Laufzeit.

module.exports = withNativeFederation({
  shared: {
    ...shareAll({ singleton: true, strictVersion: true }),
  },
});

Der Helfer shareAll

shareAll() teilt mit einer einzigen Konfiguration alle Abhängigkeiten aus Ihrer package.json – ein üblicher Ausgangspunkt. Anschließend können Sie bestimmte Pakete überschreiben.

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

singleton: Warum es für Angular wichtig ist

singleton: true erzwingt im gesamten App-Verbund genau eine Instanz eines Pakets. Angular Core, RxJS und der Router MÜSSEN Singletons sein. Zwei Kopien von @angular/core bedeuten zwei Injector-Bäume und Fehler zur Laufzeit.

Versionsverhandlung

Wenn Remotes unterschiedliche Versionen anfordern, wählt Federation eine kompatible Version aus. strictVersion: true löst bei inkompatiblen Versionen einen Fehler aus, statt stillschweigend eine nicht passende Version zu laden, und macht Probleme frühzeitig sichtbar.

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

Eigene Bibliotheken teilen

Eine gemeinsam genutzte Designsystem- oder Authentifizierungsbibliothek sollte ebenfalls ein Singleton sein, damit der Zustand (z. B. der aktuelle Benutzer) konsistent bleibt. Teilen Sie sie ausdrücklich unter ihrem Namen.

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

requiredVersion: auto

requiredVersion: 'auto' liest die Version aus Ihrer package.json, sodass Sie sie nicht fest codieren müssen. Dadurch bleibt die Konfiguration bei der Aktualisierung von Abhängigkeiten synchron.

Was zur Laufzeit geschieht

Jeder Build erzeugt Metadaten zu seinen gemeinsam genutzten Paketen. Beim Laden vergleicht Federation die Versionen von Host und Remotes und stellt über die Import Map ein gemeinsames Modul bereit, sodass der Browser es nur einmal abruft.

Die Kosten des Nicht-Teilens

Angular nicht zu teilen, ist der klassische Fehler: Die App scheint zunächst zu funktionieren, wirft dann aber kryptische Fehler wie „NG0203: inject() must be called from an injection context“, weil zwei Angular-Kopien vorhanden sind. Das Teilen als Singleton verhindert dies.

Versionen synchron halten

Unabhängige Deployments können auseinanderlaufen. Die Teams sollten sich auf einen gemeinsamen Versionsbereich für Framework-Pakete einigen und Updates koordiniert durchführen, da ein Host mit Angular 18 nicht sicher mit einem Remote geteilt werden kann, der Angular 17 benötigt.

Ein gemeinsam genutztes Paket auslassen

Gelegentlich benötigt ein Remote eine eigene isolierte Kopie eines kleinen Hilfsprogramms. Sie können es vom Teilen ausschließen, sodass es privat gebündelt wird, und für die Unabhängigkeit eine doppelte Paketgröße in Kauf nehmen.

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

Kurzer Test

Welche Pakete müssen Singletons sein?

Zusammenfassung

Definieren Sie gemeinsame Abhängigkeiten mit shared (häufig über shareAll), damit Host und Remotes jeweils nur eine Kopie laden. Machen Sie Framework- und zustandsbehaftete Bibliotheken (@angular/core, Router, RxJS, Ihre Auth-Bibliothek) mit singleton: true zu Singletons. Verwenden Sie strictVersion und requiredVersion: 'auto', um Abweichungen zu erkennen. Wenn Angular nicht geteilt wird, entstehen DI-Fehler.

Häufig gestellte Fragen

Ist die Lektion „Abhängigkeiten gemeinsam nutzen“ kostenlos?

Ja — der vollständige Text von „Abhängigkeiten gemeinsam nutzen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Abhängigkeiten gemeinsam nutzen“?

Angular und Bibliotheken über Remotes hinweg gemeinsam nutzen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Abhängigkeiten gemeinsam nutzen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy