Angular Academy · Lektion

Ladda fjärrmoduler

Ladda fjärranslutna micro frontends dynamiskt.

Lektion 4 av 413 steg

Ladda fjärrmoduler är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Läs in en remote under körning

När en remote har exponerat en modul och hosten känner till dess URL läser hosten in den vid behov med loadRemoteModule. Det är en dynamisk import över HTTP: inget från remoten paketeras i hostens bygge.

API:t loadRemoteModule

loadRemoteModule tar emot remotenamnet (från manifestet) och den exponerade nyckeln (från remotens exposes). Det returnerar ett löfte som innehåller modulen.

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

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

Lazy loading av remote-routes

Det tydligaste mönstret är att exponera en route-fil från varje remote och läsa in den med lazy loading i hostens router via loadChildren, så att remoten läses in först när dess route besöks.

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

Läs in en enskild komponent

Ni kan också exponera och läsa in en enskild fristående komponent, vilket passar bra när Ni vill bädda in en widget i stället för ett helt route-område.

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

Exponera på remote-sidan

För att hosten ska kunna läsa in modulen måste remoten lista exporten i sin karta exposes. Nyckeln är det som hosten skickar till loadRemoteModule.

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

Dynamisk upplösning via manifest

Eftersom hosten läser manifestet vid starten kan Ni byta URL:er för remotes per miljö (utveckling, staging, produktion) utan att bygga om hosten, genom att bara distribuera en annan manifestfil.

Hantera fel vid inläsning

Remotes läses in över nätverket och kan misslyckas (offline eller pågående distribution). Omge inläsningen med felhantering så att en enda trasig remote inte kraschar hela skalet.

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

Skicka data över gränsen

Kommunikation mellan host och remote sker via delade singleton-tjänster eller routern, inte via direkta importer. En delad autentiseringstjänst (singleton) gör att en remote kan läsa den aktuella användare som hosten har angett.

Versionshantering och kontrakt

Den exponerade nyckeln (t.ex. ./Routes) och dess struktur utgör ett kontrakt. Om exportens struktur ändras kan hostar som läser in den sluta fungera, så behandla exponerade moduler som ett offentligt API och versionshantera dem noggrant.

Strategier för förinläsning

Ni kan förläsa en remote när appen har blivit inaktiv, så att senare navigering sker direkt, samtidigt som den första inläsningen förblir liten. På så sätt balanseras starthastighet mot den upplevda navigeringshastigheten.

Flöde från början till slut

För att sammanfatta körningsflödet: host läser manifestet, användaren navigerar till en federerad route, loadRemoteModule hämtar remotens remoteEntry.json, delade singleton-instanser återanvänds och remotens routes/komponent renderas i hostens skal.

Snabb kontroll

Hur laddar en host-funktion en remote-funktion på ett lazy sätt?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Hostar laddar remotes under körning med loadRemoteModule(name, key), vanligtvis inuti loadChildren/loadComponent för lazy routes. Remotes måste expose-nyckeln, och manifestet löser URL:er för varje miljö. Hantera laddningsfel på ett robust sätt, kommunicera via delade singleton-instanser och behandla exponerade moduler som versionshanterade kontrakt.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Ladda fjärrmoduler” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Ladda fjärrmoduler”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Ladda fjärrmoduler”?

Ladda fjärranslutna micro frontends dynamiskt. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Ladda fjärrmoduler”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy