Angular Academy · Lektion

Indlæsning af remote-moduler

Indlæs remote-mikrofrontends dynamisk.

Lektion 4 af 413 trin

Indlæsning af remote-moduler er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.

Indlæsning af en remote ved kørsel

Når en remote eksponerer et modul, og hosten kender dens URL, indlæser hosten det efter behov med loadRemoteModule. Det er en dynamisk import over HTTP: Intet fra remoten pakkes ind i hostens build.

API'et loadRemoteModule

loadRemoteModule modtager remotenavnet (fra manifestet) og den eksponerede nøgle (fra remotens exposes). Den returnerer et løfte om modulet.

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

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

Lazy loading af remote-ruter

Det reneste mønster eksponerer en rutefil fra hver remote og indlæser den lazy i hostens router med loadChildren, så remoten først indlæses, når dens rute besøges.

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

Indlæsning af en enkelt komponent

Du kan også eksponere og indlæse en enkelt standalone-komponent, hvilket er nyttigt til at indlejre en widget i stedet for et helt ruteområde.

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

Eksponering på remote-siden

For at hosten kan indlæse den, skal remoten angive eksporten i sit exposes-kort. Nøglen er det, hosten sender til loadRemoteModule.

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

Dynamisk opslag i manifestet

Fordi hosten læser manifestet ved opstart, kan du udskifte remote-URL'er pr. miljø (udvikling, test, produktion) uden at bygge hosten igen, blot ved at levere en anden manifestfil.

Håndtering af fejl ved indlæsning

Remotes indlæses over netværket og kan fejle (offline, udrulning i gang). Omslut indlæsninger med fejlhåndtering, så én defekt remote ikke får hele skallen til at gå ned.

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

Overførsel af data på tværs af grænsen

Kommunikation mellem host og remote bruger delte singleton-tjenester eller routeren, ikke direkte importer. En delt godkendelsestjeneste (singleton) gør det muligt for en remote at læse den aktuelle bruger, som hosten har angivet.

Versionering og kontrakter

Den eksponerede nøgle (f.eks. ./Routes) og dens struktur udgør en kontrakt. Hvis eksportens struktur ændres, kan det ødelægge hosts, der indlæser den, så behandl eksponerede moduler som et offentligt API, og versionér dem omhyggeligt.

Strategier til forudindlæsning

Du kan forudindlæse en remote, når appen er inaktiv, så senere navigation bliver øjeblikkelig, samtidig med at den første indlæsning forbliver let. Det afvejer opstartshastighed mod den oplevede navigationshastighed.

End-to-end-forløb

For at opsummere kørselstidsforløbet: værten læser manifestet, brugeren navigerer til en federeret rute, loadRemoteModule henter den fjernliggende remoteEntry.json, delte singletoner genbruges, og den fjernliggendes ruter/komponent gengives i værtens skal.

Hurtigt tjek

Hvordan indlæser en vært en fjernliggende funktion efter behov?

Besvar den i den interaktive lektion

Opsummering

Værter indlæser fjernliggende moduler under kørsel med loadRemoteModule(name, key), som regel inde i loadChildren/loadComponent til lazy-ruter. Fjernliggende moduler skal expose nøglen, og manifestet finder URL'er for hvert miljø. Håndtér indlæsningsfejl på en robust måde, kommunikér via delte singletoner, og betragt eksponerede moduler som versionsstyrede kontrakter.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 38
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Indlæsning af remote-moduler” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Indlæsning af remote-moduler”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Indlæsning af remote-moduler”?

Indlæs remote-mikrofrontends dynamisk. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Angular Academy?

Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Indlæsning af remote-moduler”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Angular Academy-lektion?

Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Angular Academy