Angular - именованные outlets

Для меня немного запутанная картина с именованными областями отображения и главное - с правильной настройкой. Нужно немного прояснить для себя.

Первое - настройка маршрутов. В ключе outlet указываем имя дополнительной области outlet - aux:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: FirstComponent },
  { path: 'chat', component: ChatComponent, outlet: 'aux' },
];

В шаблоне обозначаем разметку для дополнительной области отображения и указываем ее имя через атрибут name - какое указали и в маршрутах:

<div style="display: flex">
  <router-outlet></router-outlet>
  <router-outlet name="aux"></router-outlet>
</div>

В навигации в директиве routerLink - добавляем конфигурационный объект с ключом outlets. Значение этого ключа - объект с ключами primary и aux; эти ключи - имена областей отрисовки outlets;

имя primary - это имя по умолчанию; имя aux - это то имя дополнительной области отображения, которое указали в маршруте.

Самое неочевидное - это значения этих ключей. Значения - это path, указанный в настройках маршрута - path: ‘home’, path: ‘chat’.

<nav>
  <a [routerLink]="['/']">first</a>
  <a [routerLink]="['/second']">second</a>
  <a [routerLink]="[{ outlets: { primary: 'home', aux: 'chat' } }]">open chat</a>
  <a [routerLink]="[{ outlets: { aux: null } }]">close chat</a>
</nav>