Angular render loading page while resolvers are fetching data

Question

My application must load some metadata and user information before the whole application even loads, this is a perfect use case for angular resolver.

For better UX, I would like to show a global loading page.

So my route would look like this:

path: '', component: MainLayoutComponent,
resolve: {
   activeStatus: ActiveStatusResolver,
   metadata: MetadataResolver,
   // user info and more ...
 },

The issue

After a lot of researching, I could not find a way to render a loading page when using resolvers, it will basically show a blank page and will not render anything in angular's scope, only out of scope like the main HTML layout.

I managed to get it to work by not using resolvers, and instead use a condition in the main layout component and load the data I need first and display the loading page and hide the application with ngIf, but I still feel like resolvers is a more elegant way of doing this.

Is there a way to render a component while resolving? I have a feeling that there is a way if I wrap my main route by another route and make the main route be a child of it, and the main route will render the loading page and use some behavior subject through a service to manage the loading/not-loading states.

Answer 1

The logic of resolver is not to load component before the resolver returns some data.

If you put your loader inside component with path having resolver it will not work, since the component itself is not initiated, it waits for resolver. There is no way the component loads any data if resolver is not done.

As you said you can have the wrapper for layout component for such purposes. Moreover, in this case you can have some type of generic solution, using LoadingService which will trigger page bluring. I would put it on the same lvl you have your router outlet, something like

  template: `
    <loader></loader>
    <router-outlet></router-outlet>
  `,