Angular 7 multiple router-outlets and lazyloading

I have an app with the following structure

app/
├── app.component.html
├── app.component.scss
├── app.component.ts
├── app.module.ts
├── core/
│   ├── core-routing.module.ts
│   ├── core.module.spec.ts
│   ├── core.module.ts
│   ├── header/
│   ├── layout/
│   ├── services/
│   └── header/
├── someModule1/
├── someModule2/

The AppModule which occupies the root of the folder is kept as bare as possible. It’s role is simply to bootstrap the Angular application, and provide the root-level router-outlet.

Everything runs through the CoreModule. The CoreModule routes are the following (forRoot()):

const routes: Routes = [
  {
    path: 'app',
    component: LayoutComponent,
  },
  {
    path: 'somePath',
    loadChildren: '../someModule1/someModule1.module#SomeModule1'
  },
  {
    path: '**', component: NotFoundComponent
  }
];

It allows me to instantiate my LayoutComponent which has the content displayed through the main router-outlet and a secondary named outlet for other components to display.

<header-component></header-component>
<mat-drawer-container>
  <mat-drawer #drawer>
    <router-outlet name="sidenav"></router-outlet>
  </mat-drawer>

  <div class="sidenav-content">
    <router-outlet></router-outlet>
  </div>
</mat-drawer-container>

I did try everything I could to display separate content in sidenav and main-content area without any success.

I expect <a [routerLink]="['somepath', { outlets: { sidenav: ['foo'] } }]">Outlet Nav</a> to display somepath in <router-outlet></router-outlet>and foo in <router-outlet name="foo"></router-outlet>

What am I doing wrong ? I've read that it could be related with lazyloading modules