How resolvers work with SSR and Angular Universal

Question

I am new to ssr and Angular universal and i have a question i didn't found an answer to.

I wanted to know if it was possible, for pages with route resolve in Angular, to be rendered by the ssr server before the resolvers finish.

In my case, I have a loader that covers my whole page, and i use the library preboot and add an event listener for the 'PrebootComplete' event. This handler hides the loader and let the app-root component show.
In my case, the loader shows for a split second after all the resolvers have finished before revealing the page, so the user is left waiting without loader the whole time.

Is there any way I can show my loader while the resolvers are executing ?
Many thanks !

H3AR7B3A7 · Accepted Answer · 2021-09-04T22:41:55.093

When you start resolving your data the router will emit a NavigationStart event. When the route is relsolved it will emit a NavigationEnd event.

So you can subscribe to router events and have the loading animation linked to a boolean value:

In app.component.ts:

loading = true

constructor(
  private router: Router
) {
  router.events.subscribe((routerEvent: Event) => {
    this.checkRouterEvent(routerEvent)
  })
}

checkRouterEvent(routerEvent: Event): void {
  if (routerEvent instanceof NavigationStart) {
     this.loading = true
  } else if (
    routerEvent instanceof NavigationEnd ||
    routerEvent instanceof NavigationCancel ||
    routerEvent instanceof NavigationError) {
      this.loading = false
    }
}

In your app.component.html:

<span class="fa fa-spinner spinner" *ngIf="loading"></span>

Or whatever your loader looks like, with an *ngIf="loading"...

How resolvers work with SSR and Angular Universal

1 Answers1