CODEWITHSUNDEEP
angularangular2-routing
Astrophage
Astrophage

Reputation: 1439

Angular 2 - Show load animation during preloadingStrategy execution

We have configured preloadingStrategy: PreloadAllModules in our routing-file app-routing.module.ts to load all modules at the first page load. Because it's a bit lagging, we would like to show a load animation until the last module is loaded. Is this possible?

app-routing.component.ts:

@NgModule({
    imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
    exports: [RouterModule]
})

We have allready implemented a gif animation for re-routing.

app.component.ts:

router.events.subscribe((routerEvent: Event) => {
    this.checkRouterEvent(routerEvent);
});
....

checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {
       this.loading = true;
    }

    // this.loading is just a boolean to show <div> with animation inside or not.
    if (routerEvent instanceof NavigationCancel ||
       routerEvent instanceof NavigationEnd ||
       routerEvent instanceof NavigationError) {
       this.loading = false;
    }
}

Upvotes: 0

Views: 191

Answers (1)

Astrophage
Astrophage

Reputation: 1439

I've figured out a way by myself. I don't know if it is the proper way but it works for me. I am just checking for the RouteConfigLoadStart and RouteConfigLoadEnd event.

private numberOfLoadingModules: number = 0;
private numberOfLoadedModules: number = 0;

checkRouterEvent(routerEvent: Event): void {
    // Used for site init. For each module which will be loaded this event is fired
    if (routerEvent instanceof RouteConfigLoadStart) {
       this.loading = true;
       this.numberOfLoadingModules += 1;
    }

    // Used for site init. For each module which has been loaded this event is fired
    if (routerEvent instanceof RouteConfigLoadEnd) {
       this.numberOfLoadedModules += 1;
    }

    // Check if all modules are completly loaded. Needed because of lagging if preloadStrategy is used (in app-routing).
    if (this.numberOfLoadedModules == this.numberOfLoadingModules) {
       this.loading = false;
    }

    if (routerEvent instanceof NavigationStart) {
       this.loading = true;
    }

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

Upvotes: 1

Related Questions