RouterLink syntax when configuring multiple router routers (primary + aux)

Question

Does anyone know why links # 1 and # 2 work, but link # 3 does not work?

<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 secondary route separately (link # 2), but I cannot activate the primary route and the secondary route at the same time (link # 3). Link number 3 activates the main route, but does not cause errors in the console.

It is interesting to note that by clicking link # 1, link # 2 creates what I want (main route AND auxiliary activated) with the path contact(aux:aside), while link # 3 has a path contact/(aux:aside)(note /).

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

Route Announcement:

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

I tried several combinations and syntaxes to no avail.

Answer 1

Try below

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

updated by Plunker !!

Hope this helps!