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?
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