Angular Academy · Lektion

Native Federation für Angular

Module Federation in Angular konfigurieren

Native Federation für Angular ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 Native Federation

Die klassische Module Federation war an webpack gebunden. Angulars Build-System wechselte zu esbuild, daher entwickelte die Community Native Federation: eine von Build-Tools unabhängige Umsetzung derselben Idee, die auf Webstandards wie Import Maps und ES-Modulen basiert.

Das Paket

Native Federation für Angular befindet sich in @angular-architects/native-federation. Fügen Sie es mit dem Angular-CLI-Schematic hinzu. Dieses richtet die Konfiguration und den Build-Prozess ein.

ng add @angular-architects/native-federation

Einen Host initialisieren

Führen Sie das Schematic für die Shell-App aus und wählen Sie dynamic-host. Es erzeugt eine federation.config.js und aktualisiert den Bootstrap, um Federation vor dem Start von Angular zu initialisieren.

ng g @angular-architects/native-federation:init --project shell --type dynamic-host

Einen Remote initialisieren

Führen Sie für eine Feature-App dieselbe Initialisierung mit remote aus. Dadurch wird die Konfiguration erstellt, die Teile des Remotes für Hosts bereitstellt.

ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201

Die federation.config.js

Diese Konfiguration bildet das Herzstück der Federation: Sie benennt den Remote, listet auf, was er mit exposes bereitstellt, und definiert gemeinsame Abhängigkeiten mit shared.

// catalog/federation.config.js
module.exports = withNativeFederation({
  name: 'catalog',
  exposes: { './Routes': './src/app/catalog.routes.ts' },
  shared: { ...shareAll({ singleton: true }) },
});

Änderungen am Bootstrap

Native Federation muss vor dem Bootstrap initialisiert werden, damit die Import Maps bereitstehen. Das Schematic teilt main.ts in einen Initialisierungsschritt auf, der bootstrap.ts lädt.

// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
  .then(() => import('./bootstrap'))
  .catch(err => console.error(err));

Remotes im Host auflisten

Der Host verwaltet ein Manifest, das Remote-Namen ihren remoteEntry.json-URLs zuordnet. So weiß er, wo die einzelnen Remotes zur Laufzeit abgerufen werden können.

// federation.manifest.json
{
  "catalog": "http://localhost:4201/remoteEntry.json"
}

Das Manifest laden

Übergeben Sie den Manifest-Pfad an initFederation. Der Host liest das Manifest beim Start einmal ein und kann anschließend jeden darin aufgeführten Remote bei Bedarf laden.

initFederation('/assets/federation.manifest.json')
  .then(() => import('./bootstrap'));

Standardbasiert statt an webpack gebunden

Da Native Federation native ES-Module und Import Maps verwendet, funktioniert es mit esbuild, Vite und anderen Bundlern. Diese Entkopplung ist der Grund, warum es zum empfohlenen Ansatz für modernes Angular wurde.

Entwicklungsserver pro Remote

Während der Entwicklung läuft jeder Remote auf einem eigenen Port (ng serve --port 4201). Der Host verweist über das Manifest auf diese URLs, sodass Sie die gesamte Zusammensetzung lokal ausführen können.

Was Native Federation bietet

Kurz gesagt: unabhängige Builds, gemeinsame Singletons (eine Angular-Instanz), dynamisches Laden von Remotes und keine Bindung an einen bestimmten Bundler. In den nächsten Lektionen geht es ausführlich um das Teilen von Abhängigkeiten und das Laden von Remote-Modulen.

Kurzer Test

Warum Native Federation statt der klassischen Module Federation in Angular?

Zusammenfassung

Native Federation (@angular-architects/native-federation) bringt Module Federation mit Import Maps in esbuild-basiertes Angular. Initialisieren Sie Hosts und Remotes mit dem Schematic, konfigurieren Sie exposes und shared in federation.config.js, rufen Sie initFederation vor dem Bootstrap auf und listen Sie Remotes in einem Manifest auf.

Häufig gestellte Fragen

Ist die Lektion „Native Federation für Angular“ kostenlos?

Ja — der vollständige Text von „Native Federation für Angular“ 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 „Native Federation für Angular“?

Module Federation in Angular konfigurieren 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 2 von 4.

Wie lange dauert die Lektion „Native Federation für Angular“?

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