Native Federation voor Angular
Configureer module federation in Angular
Native Federation voor Angular is een gratis Angular Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.
Waarom Native Federation
Klassieke Module Federation was gekoppeld aan webpack. Het Angular-buildsysteem is overgestapt op esbuild, waarna de community Native Federation heeft gemaakt: een implementatie van hetzelfde idee die onafhankelijk is van buildhulpmiddelen en is gebaseerd op webstandaarden (import maps en ES-modules).
Het pakket
Native Federation voor Angular bevindt zich in @angular-architects/native-federation. Voeg het toe met het schema van de Angular CLI; dit stelt de configuratie en het buildproces in.
ng add @angular-architects/native-federationEen host initialiseren
Voer het schema uit op de schilapplicatie en kies dynamic-host. Het schema genereert een federation.config.js en werkt de bootstrap bij om federation te initialiseren voordat Angular start.
ng g @angular-architects/native-federation:init --project shell --type dynamic-hostEen remote initialiseren
Voer voor een functieapplicatie dezelfde initialisatie uit met remote. Hiermee wordt de configuratie gemaakt die onderdelen van de remote beschikbaar stelt aan hosts.
ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201De federation.config.js
Deze configuratie vormt het hart van federation: ze benoemt de remote, vermeldt wat deze exposes en declareert gedeelde afhankelijkheden met shared.
// catalog/federation.config.js
module.exports = withNativeFederation({
name: 'catalog',
exposes: { './Routes': './src/app/catalog.routes.ts' },
shared: { ...shareAll({ singleton: true }) },
});Wijzigingen aan de bootstrap
Native Federation vereist initialisatie vóór de bootstrap, zodat import maps gereed zijn. Het schema splitst main.ts op in een initialisatiestap die bootstrap.ts laadt.
// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
.then(() => import('./bootstrap'))
.catch(err => console.error(err));Remotes in de host vermelden
De host houdt een manifest bij dat namen van remotes koppelt aan hun URL voor remoteEntry.json, zodat de host weet waar elke remote tijdens runtime moet worden opgehaald.
// federation.manifest.json
{
"catalog": "http://localhost:4201/remoteEntry.json"
}Het manifest laden
Geef het pad naar het manifest door aan initFederation. De host leest het één keer bij het opstarten en kan daarna elke vermelde remote op aanvraag laden.
initFederation('/assets/federation.manifest.json')
.then(() => import('./bootstrap'));Gebaseerd op standaarden, niet aan webpack gebonden
Omdat Native Federation gebruikmaakt van native ES-modules en import maps, werkt het met esbuild, Vite en andere bundelaars. Deze ontkoppeling verklaart waarom het de aanbevolen aanpak voor modern Angular is geworden.
Ontwikkelservers per remote
Tijdens de ontwikkeling draait elke remote op een eigen poort (ng serve --port 4201). De host verwijst via het manifest naar deze URL's, zodat u de volledige samenstelling lokaal kunt uitvoeren.
Wat Native Federation biedt
Kort samengevat: onafhankelijke builds, gedeelde singletons (één Angular-exemplaar), dynamisch laden van remotes en geen koppeling aan een specifieke bundelaar. In de volgende lessen behandelen we het delen van afhankelijkheden en het laden van remote-modules in detail.
Korte controle
Waarom Native Federation gebruiken in plaats van klassieke Module Federation voor Angular?
Samenvatting
Native Federation (@angular-architects/native-federation) brengt module federation naar Angular op basis van esbuild, met behulp van import maps. Initialiseer hosts en remotes met het schema, configureer exposes en shared in federation.config.js, roep initFederation aan vóór de bootstrap en vermeld remotes in een manifest.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 38
- Lessen
- 144
Veelgestelde vragen
Is de les “Native Federation voor Angular” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Native Federation voor Angular”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.
Wat leer ik in “Native Federation voor Angular”?
Configureer module federation in Angular Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Angular Academy te beginnen?
Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Native Federation voor Angular”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Angular Academy?
Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Microfrontendarchitectuur
- Native Federation voor Angular
- Dependencies delen
- Remote modules laden