Angular Academy · Lektion

Native Federation för Angular

Konfigurera modulfederering i Angular.

Lektion 2 av 413 steg

Native Federation för Angular är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 2 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.

Varför Native Federation

Classic Module Federation var knutet till webpack. Angulars byggsystem gick över till esbuild, så communityn skapade Native Federation: en implementation av samma idé som är oberoende av byggverktyg och bygger på webbstandarder (import maps och ES-moduler).

Paketet

Native Federation för Angular finns i @angular-architects/native-federation. Lägg till det med Angular CLI-schemat, som kopplar in konfigurationen och byggprocessen.

ng add @angular-architects/native-federation

Initiera en host

Kör schemat på skalappen och välj dynamic-host. Det skapar en federation.config.js och uppdaterar bootstrap-logiken så att federation initieras innan Angular startar.

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

Initiera en remote

För en funktionsapp kör Ni samma initiering med remote. Då skapas konfigurationen som exponerar delar av remoten för hostar.

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

federation.config.js

Den här konfigurationen är federationens kärna: den anger namnet på remoten, listar vad den exposes och deklarerar shared-beroenden.

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

Ändringar i bootstrap

Native Federation kräver initiering före bootstrap så att import maps är tillgängliga. Schemat delar upp main.ts i ett initieringssteg som läser in bootstrap.ts.

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

Lista remotes i hosten

Hosten har ett manifest som mappar remotenamn till deras URL:er för remoteEntry.json, så att den vet var varje remote ska hämtas under körning.

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

Läs in manifestet

Skicka manifestsökvägen till initFederation. Hosten läser det en gång vid starten och kan sedan läsa in valfri listad remote vid behov.

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

Standardbaserat, inte bundet till webpack

Eftersom Native Federation använder inbyggda ES-moduler och import maps fungerar det med esbuild, Vite och andra bundlers. Denna frikoppling är anledningen till att det blev den rekommenderade metoden för moderna Angular-appar.

Utvecklingsservrar per remote

Under utveckling körs varje remote på sin egen port (ng serve --port 4201). Hosten pekar på dessa URL:er via manifestet, så att Ni kan köra hela sammansättningen lokalt.

Vad Native Federation ger Er

Kort sagt: oberoende byggen, delade singletoner (en Angular-instans), dynamisk inläsning av remotes och ingen koppling till en specifik bundler. I nästa lektioner går vi igenom hur beroenden delas och hur remote-moduler läses in.

Snabb kontroll

Varför Native Federation i stället för Classic Module Federation i Angular?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Native Federation (@angular-architects/native-federation) tar module federation till esbuild-baserad Angular med hjälp av import maps. Initiera hostar och remotes med schemat, konfigurera exposes och shared i federation.config.js, anropa initFederation före bootstrap och lista remotes i ett manifest.

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 ”Native Federation för Angular” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Native Federation för Angular”, 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 ”Native Federation för Angular”?

Konfigurera modulfederering i Angular. 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 2 av 4.

Hur lång tid tar lektionen ”Native Federation för Angular”?

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