angularserver-side-renderingangular-universalangular-resolver

How resolvers work with SSR and Angular Universal


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 !


Solution

  • 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"...