Lazy Loading & Dynamic Component Loading in Angular

Lazy Loading & Dynamic Component Loading in Angular

In large Angular applications, performance is of paramount importance. To enhance the performance and optimize the loading time, Angular offers techniques such as Lazy Loading and Dynamic Component Loading. Here's a deep dive into both.

1. Lazy Loading:

Lazy loading is a technique where specific parts (typically modules) of an application are loaded only when they're required, rather than loading them when the app starts.

Benefits:

• Reduced initial loading time.
• Splitting the app into multiple bundles, loading them as needed.

How to Implement:

1. Create Feature Modules: Split your app into feature modules.

2. Configure Routes: In your main routing configuration, use the loadChildren property:

{
  path: 'feature',
  loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
}

3. Ensure that the feature module is not imported elsewhere, as this would negate the benefits of lazy loading.

2. Dynamic Component Loading:

Dynamic Component Loading allows you to instantiate and load components as needed at runtime, rather than defining them in the template or routing configuration.

Benefits:

• Loading components based on logic or state.
• Enhancing flexibility by rendering components on-the-fly.

How to Implement:

1. Define an Anchor Point: Use a directive to mark where you want to insert the component. Commonly, ViewContainerRef is used as an anchor.

2. Component Factory Resolver: This service allows you to create an instance of a component.

@ViewChild(YourDirective, { static: true }) anchor: YourDirective;
componentRef: ComponentRef<YourComponent>;

constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

loadComponent() {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(YourComponent);
  
  const viewContainerRef = this.anchor.viewContainerRef;
  viewContainerRef.clear();

  this.componentRef = viewContainerRef.createComponent(componentFactory);
}

3. Accessing Component Data: You can interact with the dynamically loaded component via this.componentRef.instance.

Conclusion:

Lazy Loading and Dynamic Component Loading are crucial techniques for enhancing performance and flexibility in Angular apps. By understanding and employing them effectively, developers can ensure optimized load times and a dynamic user experience.