Вложенная маршрутизация с выходами маршрутизации не работает

Question

Я использую Angular 9.1.7. Я хочу реализовать другую маршрутизацию для дочерних компонентов. Например, графическое представление должно иметь 2 выхода маршрутизатора, где верхняя и нижняя область моего основного контента отображается в зависимости от маршрутов. Почему-то я не понимаю, это не работает.

Я хочу сделать sh следующее. По URI:

localhost: 4200 / или localhost: 4200 / home

MainContentComponent
-> GraphViewComponent
--> StackedLineGraphComponent
--> CarouselViewComponent

localhost: 4200 / details /: gameTitle

MainContentComponent
-> GameDetailsComponent

Вот мои шаблоны.

main-content.component. html

<router-outlet name="main-content"></router-outlet>

graph-view.component. html

<div class="breadcrumb-container">
  <app-breadcrumb></app-breadcrumb>
</div>
<div class="graph-wrapper">
  <router-outlet name="graph"></router-outlet>
</div>
<hr>
<div class="main-content-wrapper">
  <router-outlet name="below-graph-content"></router-outlet>
</div>

app-routing.module.ts

const routes: Routes = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{
  path: 'home', component: MainContentComponent, children:
    [
      {
        path: '', outlet: 'main-content', component: GraphViewComponent, children:
          [
            {path: '', outlet: 'graph', component: StackedLineGraphComponent},
            {path: '', outlet: 'below-graph-content', component: CarouselViewComponent}
          ]
      },
      {path: 'details/:gameTitle', outlet: 'main-content', component: GameDetailsComponent}
    ]
}];

Я думаю, что шаблоны верны, должно быть что-то с маршрутами, которые мне не хватает.