Angular Academy · Lektion

Remote-Module laden

Remote-Micro-Frontends dynamisch laden

Remote-Module laden ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Einen Remote zur Laufzeit laden

Sobald ein Remote ein Modul bereitstellt und der Host seine URL kennt, lädt der Host es bei Bedarf mit loadRemoteModule. Das ist ein dynamischer Import über HTTP: Nichts vom Remote wird in den Host-Build gebündelt.

Die loadRemoteModule-API

loadRemoteModule erhält den Remote-Namen (aus dem Manifest) und den bereitgestellten Schlüssel (aus exposes des Remotes). Die Funktion gibt ein Promise für dieses Modul zurück.

import { loadRemoteModule } from '@angular-architects/native-federation';

const m = await loadRemoteModule('catalog', './Routes');

Lazy Loading von Remote-Routen

Das sauberste Muster stellt aus jedem Remote eine Routendatei bereit und lädt sie im Host-Router mit loadChildren verzögert. So wird der Remote erst geladen, wenn seine Route aufgerufen wird.

export const routes: Routes = [
  {
    path: 'catalog',
    loadChildren: () =>
      loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
  },
];

Eine einzelne Komponente laden

Sie können auch eine einzelne eigenständige Komponente bereitstellen und laden. Das eignet sich, wenn Sie ein Widget statt eines vollständigen Routenbereichs einbetten möchten.

{
  path: 'widget',
  loadComponent: () =>
    loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}

Bereitstellung auf der Remote-Seite

Damit der Host den Remote laden kann, muss dieser den Export in seiner exposes-Map aufführen. Der Schlüssel ist der Wert, den der Host an loadRemoteModule übergibt.

// remote federation.config.js
exposes: {
  './Routes': './src/app/catalog.routes.ts',
  './Widget': './src/app/widget.component.ts',
}

Dynamische Manifest-Auflösung

Da der Host das Manifest beim Start liest, können Sie die Remote-URLs je Umgebung (Entwicklung, Staging, Produktion) austauschen, ohne den Host neu zu bauen – Sie müssen lediglich eine andere Manifestdatei ausliefern.

Fehler beim Laden behandeln

Remotes werden über das Netzwerk geladen und können ausfallen (Offline-Situation, laufendes Deployment). Fangen Sie Fehler beim Laden ab, damit ein einzelner fehlerhafter Remote nicht die gesamte Shell zum Absturz bringt.

loadRemoteModule('catalog', './Routes')
  .then(m => m.CATALOG_ROUTES)
  .catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));

Daten über die Grenze hinweg übergeben

Die Kommunikation zwischen Host und Remote erfolgt über gemeinsam genutzte Singleton-Services oder den Router, nicht über direkte Imports. Ein gemeinsamer Authentifizierungsservice (Singleton) ermöglicht es einem Remote, den vom Host gesetzten aktuellen Benutzer auszulesen.

Versionierung und Verträge

Der bereitgestellte Schlüssel (z. B. ./Routes) und seine Struktur bilden einen Vertrag. Eine Änderung der Exportstruktur kann Hosts beschädigen, die den Export laden. Behandeln Sie bereitgestellte Module daher wie eine öffentliche API und versionieren Sie sie sorgfältig.

Strategien zum Vorladen

Sie können einen Remote nach dem Inaktivwerden der App proaktiv laden, damit die spätere Navigation sofort erfolgt und der initiale Ladevorgang trotzdem schlank bleibt. So gleichen Sie Startgeschwindigkeit und wahrgenommene Navigationsgeschwindigkeit aus.

End-to-End-Ablauf

Zur Wiederholung des Laufzeitpfads: Der Host liest das Manifest, Sie navigieren zu einer föderierten Route, loadRemoteModule ruft die remoteEntry.json des Remote-Moduls ab, gemeinsam genutzte Singletons werden wiederverwendet und die Routen bzw. Komponente des Remote-Moduls werden innerhalb der Host-Shell gerendert.

Kurze Überprüfung

Wie lädt ein Host ein Remote-Feature verzögert?

Zusammenfassung

Hosts laden Remote-Module zur Laufzeit mit loadRemoteModule(name, key), üblicherweise innerhalb von loadChildren/loadComponent für verzögerte Routen. Remote-Module müssen den Schlüssel mit expose bereitstellen; das Manifest löst die URLs für die jeweilige Umgebung auf. Behandeln Sie Ladefehler auf angemessene Weise, kommunizieren Sie über gemeinsam genutzte Singletons und betrachten Sie bereitgestellte Module als versionierte Verträge.

Häufig gestellte Fragen

Ist die Lektion „Remote-Module laden“ kostenlos?

Ja — der vollständige Text von „Remote-Module laden“ 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 „Remote-Module laden“?

Remote-Micro-Frontends dynamisch laden 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 4 von 4.

Wie lange dauert die Lektion „Remote-Module laden“?

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