Angular: ссылки маршрутизатора изменяются после маршрутизации во вложенном маршрутизаторе

Question

У меня есть следующая страница в моем Ionic/Angular проекте:

<nav mat-tab-nav-bar>
    <a mat-tab-link [routerLink]="['./', { outlets: { sub: ['a'] } }]"
       routerLinkActive #a="routerLinkActive"
       [active]="a.isActive">
      A
    </a>
    <a mat-tab-link [routerLink]="['./', { outlets: { sub: ['b'] } }]"
       routerLinkActive #b="routerLinkActive"
       [active]="b.isActive">
      B
    </a>
    <a mat-tab-link [routerLink]="['./', { outlets: { sub: ['c'] } }]"
       routerLinkActive #c="routerLinkActive"
       [active]="c.isActive">
      C
    </a>
    <a mat-tab-link [routerLink]="['./', { outlets: { sub: ['d'] } }]"
       routerLinkActive #d="routerLinkActive"
       [active]="d.isActive">
      D
    </a>
</nav>

<router-outlet name="sub"></router-outlet> <!-- Nested Router inside another router-outlet -->

Теперь мой app-routing.module.ts выглядит так:

{ path: 'test/:testid/other/:newid',
    component: ABCDPage,
    children: [
      { path: 'a', loadChildren: './a/a.module#APageModule', outlet: 'sub' },
      { path: 'b', loadChildren: './b/b.module#BPageModule', outlet: 'sub' },
      { path: 'c', loadChildren: './c/c.module#CPageModule', outlet: 'sub' },
      { path: 'd', loadChildren: './d/d.module#DPageModule', outlet: 'sub' },
    ]
  }

Угловой рендеринг href из a Тэги в порядке при загрузке страницы:

/test/47839743/other/4738933/(sub:a)/test/47839743/other/4738933/(sub:b)/test/47839743/other/4738933/(sub:c)/test/47839743/other/4738933/(sub:d)

Однако после маршрутизации (успешно) href на a теги выглядят так:

/test/47839743/other/4738933/(sub:b)/test/47839743/other/4738933/(sub:b)/test/47839743/other/4738933/(sub:b)/test/47839743/other/4738933/(sub:b)

куда b была ссылка, которую я нажал. Что происходит и почему Angular меняет мои маршруты?