Remote modules laden
Laad remote microfrontends dynamisch
Remote modules laden is een gratis Angular Academy-les op CoddyKit. Dit is les 4 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.
Een remote laden tijdens runtime
Zodra een remote een module beschikbaar stelt en de host de URL kent, laadt de host deze op aanvraag met loadRemoteModule. Dit is een dynamische import via HTTP: niets van de remote wordt in de host-build gebundeld.
De API loadRemoteModule
loadRemoteModule ontvangt de naam van de remote (uit het manifest) en de beschikbare sleutel (uit exposes van de remote). De functie geeft een belofte van die module terug.
import { loadRemoteModule } from '@angular-architects/native-federation';
const m = await loadRemoteModule('catalog', './Routes');Lazy loading van remote-routes
Het duidelijkste patroon stelt vanuit elke remote een routebestand beschikbaar en laadt dit lui in de host-router met loadChildren. Zo wordt de remote pas geladen wanneer de bijbehorende route wordt bezocht.
export const routes: Routes = [
{
path: 'catalog',
loadChildren: () =>
loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
},
];Eén component laden
U kunt ook één zelfstandig component beschikbaar stellen en laden. Dat is handig om een widget in te voegen in plaats van een volledig routegebied.
{
path: 'widget',
loadComponent: () =>
loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}Beschikbaar stellen aan de remotezijde
Om de host het onderdeel te laten laden, moet de remote de export vermelden in zijn exposes-kaart. De sleutel is wat de host aan loadRemoteModule doorgeeft.
// remote federation.config.js
exposes: {
'./Routes': './src/app/catalog.routes.ts',
'./Widget': './src/app/widget.component.ts',
}Dynamische manifestresolutie
Omdat de host het manifest bij het opstarten leest, kunt u per omgeving (ontwikkeling, acceptatie, productie) andere URL's voor remotes gebruiken zonder de host opnieuw te bouwen. U hoeft alleen een ander manifestbestand mee te leveren.
Laadfouten afhandelen
Remotes worden via het netwerk geladen en kunnen mislukken (offline, implementatie bezig). Omring het laden met foutafhandeling, zodat één defecte remote niet de hele schil laat crashen.
loadRemoteModule('catalog', './Routes')
.then(m => m.CATALOG_ROUTES)
.catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));Gegevens over de grens doorgeven
Communicatie tussen host en remote gebruikt gedeelde singletonservices of de router, geen directe imports. Met een gedeelde authenticatieservice (singleton) kan een remote de huidige gebruiker lezen die door de host is ingesteld.
Versiebeheer en contracten
De beschikbare sleutel (bijvoorbeeld ./Routes) en de vorm ervan vormen samen een contract. Als de vorm van de export verandert, kunnen hosts die deze laden defect raken. Behandel beschikbare modules daarom als een openbare API en versieer ze zorgvuldig.
Strategieën voor vooraf laden
U kunt een remote vooraf laden zodra de applicatie niet actief is, zodat latere navigatie direct verloopt en de eerste laadbeurt toch licht blijft. Zo balanceert u opstartsnelheid met de ervaren navigatiesnelheid.
End-to-endverloop
Samengevat verloopt het runtimepad als volgt: de host leest het manifest, de gebruiker navigeert naar een gefedereerde route, loadRemoteModule haalt de remoteEntry.json van de remote op, gedeelde singleton-exemplaren worden hergebruikt en de routes/component van de remote worden binnen de shell van de host weergegeven.
Korte controle
Hoe laadt een host een remote functie op een luie manier?
Samenvatting
Hosts laden remotes tijdens runtime met loadRemoteModule(name, key), meestal binnen loadChildren/loadComponent voor luie routes. Remotes moeten de sleutel exposen; het manifest bepaalt de URL's per omgeving. Handel laadfouten netjes af, communiceer via gedeelde singleton-exemplaren en behandel blootgestelde modules als contracten met versies.
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 “Remote modules laden” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Remote modules laden”, 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 “Remote modules laden”?
Laad remote microfrontends dynamisch 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 4 van 4.
Hoe lang duurt de les “Remote modules laden”?
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