Angular Academy · leksjon

Native Federation for Angular

Konfigurer modul-federation i Angular.

Leksjon 2 av 413 trinn

Native Federation for Angular er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 2 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.

Hvorfor Native Federation

Classic Module Federation var knyttet til webpack. Angulars byggesystem gikk over til esbuild, og derfor utviklet fellesskapet Native Federation: en implementasjon av samme idé som er uavhengig av byggverktøy og bygger på webstandarder (import maps og ES-moduler).

Pakken

Native Federation for Angular ligger i @angular-architects/native-federation. Legg den til med Angular CLI-skjemaet, som kobler opp konfigurasjonen og byggeprosessen.

ng add @angular-architects/native-federation

Initialisere en host

Kjør skjemaet på skallappen og velg dynamic-host. Det genererer en federation.config.js og oppdaterer oppstarten slik at federation initialiseres før Angular starter.

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

Initialisere en remote

For en funksjonsapp kjører du den samme initialiseringen med remote. Dette oppretter konfigurasjonen som eksponerer deler av remoten for hoster.

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

federation.config.js

Denne konfigurasjonen er kjernen i federation: Den navngir remoten, viser hva den exposes, og erklærer shared-avhengigheter.

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

Endringer i oppstarten

Native Federation krever initialisering før oppstart, slik at import maps er klare. Skjemaet deler main.ts opp i et initialiseringstrinn som laster inn bootstrap.ts.

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

Oppgi remotes i hosten

Host-en har et manifest som knytter remotenavn til URL-en for remoteEntry.json, slik at den vet hvor hver remote skal hentes under kjøring.

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

Laste inn manifestet

Send manifeststien til initFederation. Hosten leser den én gang ved oppstart og kan deretter laste inn alle oppførte remotes ved behov.

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

Standardbasert, ikke bundet til webpack

Fordi Native Federation bruker innebygde ES-moduler og import maps, fungerer det med esbuild, Vite og andre bundlere. Denne frikoblingen er grunnen til at det har blitt den anbefalte tilnærmingen for moderne Angular.

Utviklingsservere per remote

Under utvikling kjører hver remote på sin egen port (ng serve --port 4201). Hosten peker på disse URL-ene gjennom manifestet, slik at hele sammensetningen kan kjøres lokalt.

Dette får du med Native Federation

Kort sagt: uavhengige bygg, delte singletoner (én Angular-instans), dynamisk lasting av remotes og ingen kobling til en bestemt bundler. De neste leksjonene går gjennom deling av avhengigheter og lasting av remotemoduler i detalj.

Kort kontrollspørsmål

Hvorfor velge Native Federation fremfor Classic Module Federation i Angular?

Besvar den i den interaktive leksjonen

Oppsummering

Native Federation (@angular-architects/native-federation) bringer module federation til esbuild-baserte Angular-apper ved hjelp av import maps. Initialiser hoster og remotes med skjemaet, konfigurer exposes og shared i federation.config.js, kall initFederation før oppstart, og oppgi remotes i et manifest.

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 «Native Federation for Angular» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Native Federation for Angular», 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 «Native Federation for Angular»?

Konfigurer modul-federation i Angular. 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 2 av 4.

Hvor lang tid tar leksjonen «Native Federation for Angular»?

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