Angular Academy · leksjon

Laste inn remote-moduler

Last inn remote-mikrofronter dynamisk.

Leksjon 4 av 413 trinn

Laste inn remote-moduler er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hente inn en remote under kjøring

Når en remote eksponerer en modul og hosten kjenner URL-en, laster hosten den inn ved behov med loadRemoteModule. Dette er en dynamisk import over HTTP: Ingenting fra remoten bygges inn i host-bygget.

API-et loadRemoteModule

loadRemoteModule tar imot remotenavnet (fra manifestet) og den eksponerte nøkkelen (fra remotens exposes). Den returnerer et løfte som inneholder modulen.

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

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

Lazy-loading av remoteruter

Det ryddigste mønsteret eksponerer en rutefil fra hver remote og laster den inn med lazy-loading i hostens ruter ved hjelp av loadChildren, slik at remoten først lastes når ruten besøkes.

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

Laste inn én enkelt komponent

Du kan også eksponere og laste inn en individuell standalone-komponent, noe som er nyttig når du vil bygge inn en widget i stedet for et helt ruteområde.

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

Eksponere på remotesiden

For at hosten skal kunne laste den inn, må remoten oppgi eksporten i sitt exposes-kart. Nøkkelen er det hosten sender til loadRemoteModule.

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

Dynamisk oppløsning av manifest

Fordi hosten leser manifestet ved oppstart, kan du bytte URL-er for remotes per miljø (utvikling, staging, produksjon) uten å bygge hosten på nytt, bare ved å levere en annen manifestfil.

Håndtere feil ved lasting

Remotes lastes inn over nettverket og kan feile (for eksempel ved frakobling eller mens en distribusjon pågår). Pakk inn lasting i feilhåndtering, slik at én enkelt defekt remote ikke krasjer hele skallet.

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

Sende data over grensen

Kommunikasjon mellom host og remote skjer via delte singleton-tjenester eller ruteren, ikke via direkte importer. En delt autentiseringstjeneste (singleton) lar en remote lese den nåværende brukeren som hosten har satt.

Versjonering og kontrakter

Den eksponerte nøkkelen (for eksempel ./Routes) og strukturen dens utgjør en kontrakt. Hvis eksportstrukturen endres, kan hoster som laster den inn, slutte å fungere. Behandle derfor eksponerte moduler som et offentlig API, og versjoner dem med omtanke.

Strategier for forhåndslasting

Du kan forhåndslaste en remote etter at appen er blitt inaktiv, slik at senere navigering skjer umiddelbart, samtidig som den første innlastingen forblir liten. Dette balanserer oppstartshastighet mot opplevd navigeringshastighet.

Flyt fra ende til ende

For å oppsummere kjøringsforløpet: verten leser manifestet, brukeren navigerer til en federert rute, loadRemoteModule henter den eksterne modulens remoteEntry.json, delte singletoner gjenbrukes, og den eksterne modulens ruter eller komponent rendres i vertens skall.

Kort sjekk

Hvordan laster en vert en ekstern funksjon på en lazy måte?

Besvar den i den interaktive leksjonen

Oppsummering

Verter laster inn eksterne moduler under kjøring med loadRemoteModule(name, key), vanligvis i loadChildren/loadComponent for lazy-ruter. Eksterne moduler må expose-ere nøkkelen, og manifestet finner URL-er for hvert miljø. Håndter lastefeil på en god måte, kommuniser via delte singletoner, og behandle eksponerte moduler som versjonerte kontrakter.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Laste inn remote-moduler» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Laste inn remote-moduler», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Laste inn remote-moduler»?

Last inn remote-mikrofronter dynamisk. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Laste inn remote-moduler»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy