Is there a way to render parent components before subroutes in Angular?

Question

I have a component with a router-outlet defined in it (ParentComponent).

<mat-accordion>some content</mat-accordion>
<mat-progress-bar *ngIf="loading"></mat-progress-bar>
<router-outlet></router-outlet>

I also have a router module with a route definition:

{path: 'parent', component: ParentComponent, children: {path: 'sub', loadChildren: () => import('./sub/sub.module').then(mod => mod.SubModule)}}

So it lazy loads the SubModule module which has only one path that renders after some data resolved:

{path: '', component: SubComponent, resolve: {data: SubResolverService}

By default the user is going through the 'parent' route first and only later loads 'parent/sub' using a button so the accordion and the loading is shown.

However, when the url is written explicitly and we go straight to the 'parent/sub' route, the app waits for the sub resolver to get the data and only after this does it render the accordion and progress bar, so the user has to stare at a blank page until every route data is loaded.

Is there a way to render the parent component first, show the progress bar and only after that starting to resolve the sub route?

Answer 1

The router wait for the resolver to finish (event child resolver). Resolvers bring data to the component synchronously. For a better user experience, you should use resolver when the data is available instantly (such as configuration data) otherwise you should use Observable inside the component to avoid blocking the display