Progress loader for ng2 route resolver

Question

I am using route resolvers, like:

  routes.push({
    path: '', component: MainComponent, children: [
      {path: 'config', component: ConfigurationWizardComponent, resolve: { settings: SettingsResolver }},
      {path: 'jobs', children: [
        {path: '', component: JobsOverviewComponent, resolve: { settings: NoFallbackSettingsResolver }},
        {path: 'add', component: JobFormComponent, resolve: { databases: DatabaseResolver }},
      ]},
      {path: '', redirectTo: '/jobs', pathMatch: 'full'},
    ],
  });

However, since the resolvers take a little while to complete, it seems that the application is not doing anything until the resolver finishes.

Is it possible to provide any kind of visual feedback to the user while a route resolver is being executed?

raberana raberana · Accepted Answer · 2017-03-09T02:58:55

I have this issue too. If you plan to have a simple loader that does not indicate any progress (eg. a simple spinner loader), what you can do is subscribe to a router's events and show and hide the loader.

constructor(private router: Router) {
 router.events
 .filter(event => event instanceof NavigationStart)
 .subscribe(() => { // show the progress bar });

  router.events
 .filter(event => event instanceof NavigationEnd)
 .subscribe(() => { // complete the progress bar })
}

However, if you plan to show any progress during the loading (like Youtube's progress bar at the top), that I still don't know how to implement.

Progress loader for ng2 route resolver

1 Answers