Parse Error creating a second router outlet in Angular

Question

I am trying to create a simple button with the Routerlink but I am getting this error:

Parser Error: Unexpected token '}' at column 37 in [[{outlets: {side-mod: ['table-list']}}]]

What I am trying to do is create a second outlet for the router. So I have this in my routing component:

const routes: Routes = [
  { path: 'home', component: HomeComponent, outlet:'header' },
  { path: 'login', component: LoginComponent, outlet:'header'},
  { path: 'register', component: RegisterComponent, outlet:'header' },  
  { path: 'user', component: BoardUserComponent, outlet:'header' },

  { path: 'table-list', component: TableListComponent, outlet:'side-mod'},


  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

So, the "index" has this kind of buttons at the header:

 <a class="nav-link" [routerLink]="[{outlets: {header: ['user']}}]" skipLocationChange="true" replaceUrl="false">Home </a>

And the router at the bottom to show the different pages:

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

So when the user press the header button to see the 'user' page, a new component appears with buttons that uses another 'outlet', but the error appears:

<a class="list-group-item list-group-item-action bg-light" [routerLink]="[{outlets: {side-mod: ['table-list']}}]">Tables</a>

I tried a lot of things to fix it like changing it to this code, but the same error appears:

[routerLink]="['', { outlets: { side-mod: ['table-list'] } }]"

Answer 1

have you tried?

[routerLink]="['' ,{outlets:{'side-mod':'table-list'}}]

the problem might come from the - character that is not recognised as a being a valid key character, wrapped around "" this should work, I've also got rid of the [] array.

Answer 2

Try to remove - from side-mod to sideMod or side_mod