Angular: Router links change after routing in nested router

Question

I have the following page in my Ionic/Angular project:

<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 -->

Now my app-routing.module.ts looks like this:

{ 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' },
    ]
  }

Angular renders the href of the a tags fine on page load:

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

However after routing (successfully) the href on the a tags look like this:

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

Where b was the link I clicked. What is happening and why is Angular changing my routes?