How to show loading component during lazy loading

Question

I did lazy loading config in my angular project. That is done, But there is a problem.

because of my lazy loading component is too big (700kb), time to load component from web server is too long (0.5s)

I have to show loading component when lazy loading.

But I can not find loading option in angular router module.

I try to find angular router type definition about lazy load.

const routes: Routes = [
  { path: '', component: RandingPageComponent },
  {
    path: 'teams/:name',
    // Loading component cannot here
    loadChildren: 'src/app/domain/domain.module#DomainModule'
  },

  { path: '**', component: NotfoundComponent }
];

I think https://stackoverflow.com/a/46423743/5629257 this might help you — Sumeet Kale, May 21 '19 at 08:45
Instead of showing a loading you could preload the module : https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb — ibenjelloun, May 21 '19 at 08:47

Dulanjaya Tennekoon · Answer 1 · 2019-05-21T09:01:05.857

3

Router.navigate method returns a promise. So you can call then() on that. Therefore what you can do is, keeping a variable called showLoadingComponent which is, in default false and when you are navigating, do this:

this.showLoadingComponent = true;
this.router.navigate(['/newComponent']).then(value => {
      this.showLoadingComponent = false;
});

In your html,

<div *ngIf="!showLoadingComponent">
    // default content
</div>
<appLoadingComponent *ngIf="showLoadingComponent"></appLoadingComponent>

This will show your loading component after you click to navigate to your lazy loading component until the lazy loading component gets loaded.

edited May 21 '19 at 09:01

answered May 21 '19 at 08:47

Dulanjaya Tennekoon

1,727
1
12
25

1

As you can see here https://angular.io/api/router/Router `navigate` method returns not `Observable` but `Promise`, however you used correct method to get notified - `then`. – Buczkowski May 21 '19 at 08:59

score 2 · Accepted Answer · edited May 21 '19 at 09:13

try this (app.component.ts)

import { Component } from "@angular/core";
import { Router, NavigationStart, NavigationEnd, Event, NavigationCancel, 
NavigationError } from "@angular/router";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  public showLoadingIndicator: boolean = true;
  constructor(private _router: Router) {
    this._router.events.subscribe((routerEvent: Event) => {
      if (routerEvent instanceof NavigationStart) {
        this.showLoadingIndicator = true;
      }

      if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
        this.showLoadingIndicator = false;
      }
    });
  }
}

in html (app.component.ts)

<div *ngIf="showLoadingIndicator" class="loading">Loading&#8230;</div>
<router-outlet></router-outlet>

How to show loading component during lazy loading

2 Answers2