[Angular] Show a Loading Indicator for Lazy Routes in Angular

Posted 2022-09-02 answer1215

We can easily code split and lazy load a route in Angular. However when the user then clicks that lazy loaded route, it make some time to actually fetch and run the javascript bundle. In this lesson we‘ll see how we can implement a loading indicator for such lazy loaded routes.

<!-- app.component.thml -->

<router-outlet>
  <span class="loader" *ngIf="loading"></span>
</router-outlet>

　

import  Component  from ‘@angular/core‘;
import  Router, RouteConfigLoadStart, RouteConfigLoadEnd, RouterEvent  from ‘@angular/router‘;

@Component(
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
)
export class AppComponent 
  loading: boolean;

  constructor(router: Router) 
    this.loading = false;

    router.events.subscribe(
      (event: RouterEvent): void => 
        if (event instanceof RouteConfigLoadStart) 
          this.loading = true;
         else if (event instanceof RouteConfigLoadEnd) 
          this.loading = false;
        
      
    );