Update: With the introduction of Angular 9 and Ivy, loading components dynamically has become possible and relatively straightforward. To begin, you need to establish an anchor point in your application where you intend to load the component. This anchor could be named templateRef for multiple different components or ng-template for a single one. Here's how you can achieve this using ng-template in your component.html:
<ng-template>
In your component.ts file:
export class ExampleComponent {
@ViewChild(TemplateRef, { read: ViewContainerRef })
private anchorRef: ViewContainerRef;
constructor(
private readonly componentFactoryResolver: ComponentFactoryResolver
) {}
private async loadComponent() {
this.anchorRef.clear(); // Clear any existing components
const { component } = await import(
'path to your component'
);
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
component
);
this.anchorRef.createComponent(componentFactory);
}
}
All that remains is to call the loadComponent method when necessary.
If you require additional modules, such as Angular Material, you must create a simple NgModule within your lazily loaded component without exporting it. For example:
@Component({...})
export class Component implements OnInit {
constructor() {}
ngOnInit() {}
}
@NgModule({
declarations: [Component],
imports: [MatIconModule],
})
class TasksListModule {}
You may also refer to the dynamic component loading approach outlined in the Angular team's documentation:
https://angular.io/guide/dynamic-component-loader