13.8.2023
Lazy Loading von Komponenten ohne Router Module
Manchmal muss man eine Komponente nachladen, ohne jedoch den Overhead zu betreiben und das Router-Modul zu importieren, da dies unnötig oder ineffizient sein kann.
Um dies zu erreichen, kann man den Lifecycle-Hook "AfterViewInit" nutzen.
Hier ist ein Code-Beispiel:
Template:
<ng-container #dfc></ng-container>Komponente:
export class AppComponent implements AfterViewInit {
@ViewChildren('dfc', { read: ViewContainerRef })
vCs!: QueryList<ViewContainerRef>;
async ngAfterViewInit() {
const dfc = await import('@lib/featureA').then(c => c.lazyComponent);
this.vCs.map((viewContainerRef: ViewContainerRef) => {
viewContainerRef.createComponent(dfc);
});
}
}
Standort Hannover
newcubator GmbH
Bödekerstraße 22
30161 Hannover
Standort Dortmund
newcubator GmbH
Westenhellweg 85-89
44137 Dortmund