Display parent component of nested route before child resolves (show router-outlet immediately)

Question

I have nested components:

• AppComponent
  • Contains just router-outlet
• PageWrapperComponent
  • Contains just the main-menu and another router-outlet
  • Requires the main-menu to get loaded from the API before display
• ContentComponent
  • Contains the actual page content
  • Requires the page content to get loaded from the API before display

And I resolve the main-menu and the page-content by use of Router's Resolve:

const routes: Routes = [
  {
    path:        '',
    component:   PageWrapperComponent,
    resolve: {
        mainMenu: MainMenuResoler,
    },
    children:    [
      {
        path: '',
        component: ContentComponent,
        resolve: {
           content: ContentResolver,
        }
      }
    ]
];

I want to display the main menu (PageWrapperComponent) as soon as MainMenuResoler is done. And then the content (ContentComponent) as soon as ContentResolver is done. But how?

I would have expected this behavior from the router. Instead Angular waits until both resolvers are done and then displays PageWrapperComponent and ContentComponent at the same time.

Cryotherapy