Lazy Loading of Components without Router Modules

Sometimes, you need to lazy load a component without the overhead and inefficiency of importing the router module.

This can be accomplished by using the lifecycle hook "AfterViewInit".

Here's an example code for your understanding:

Template:

1<ng-container #dfc></ng-container>

Component:

1export class AppComponent implements AfterViewInit {
2    @ViewChildren('dfc', { read: ViewContainerRef })
3    vCs!: QueryList<ViewContainerRef>;
4
5    async ngAfterViewInit() {
6        const dfc = await import('@lib/featureA').then(c => c.lazyComponent);
7        this.vCs.map((viewContainerRef: ViewContainerRef) => {
8            viewContainerRef.createComponent(dfc);
9        });
10    }
11}

This approach provides the benefit of keeping your application's initial load time low while allowing for enhanced flexibility in your code. It's a useful trick when dealing with large, complex applications with numerous components.