routerLink syntax when targeting multiple router-outlets (primary + aux)

Question

Does anyone know why link #1 and #2 work but link #3 doesn't?

<a [routerLink]="['/contact']">Contact Solo</a> |
<a [routerLink]="[{ outlets: { aux: 'aside' }}]">Aux Solo</a> |
<a [routerLink]="['/contact', { outlets: { aux: 'aside' }}]">Contact + Aux</a>

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

In other words: I can activate the primary route individually (link #1), I can activate the auxiliary route individually (link #2), but I can't activate the primary route AND the auxiliary route simultaneously (link #3). Link #3 only activates the primary route but triggers no error in the console.

Interestingly, clicking link #1 then link #2 produces what I want (primary route AND auxiliary activated) with a path of contact(aux:aside) whereas link #3 has a path of contact/(aux:aside) (notice the /).

Plunkr: https://plnkr.co/edit/WqTRjux7muHjalIL3rsL?p=preview

Route declaration:

const appRoutes: Routes = [
  {
    path: 'contact',
    component: ContactComponent,
  },
  {
    path: 'aside',
    component: PopupComponent,
    outlet: 'aux'
  }
];

I've tried multiple combinations and syntaxes to no avail.

Answer 1

Try below,

 <a [routerLink]="[{ outlets: { primary: 'contact', aux: 'aside' }}]">Contact + Aux</a>

updated Plunker!!

Hope this helps!!