routerLink with outlet redirects to 404 error page

Question

I have a angular 4 application and I am not able to set a working routerLink for navigation. The request gets always redirected to my 404 error page.

Here is my code:

The relevant part of my route-config in my NgModule:

{
   path: 'Transactions',
   component: TransactionIndexComponent,
   children: [
      {
         path: 'Add',
         outlet: "next",
         component: TransactionAddComponent,
         children: [
            { path: "AddPerson", component: PersonsAddComponent, outlet: "next" }
         ]
      },
   ]
},

The relevant part of TransactionsIndexComponent template:

<a routerLink="[{ outlets: { next: 'Add' } } ]" class="tile">Add</a>

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

The relevant part of TransactionAddComponent template:

<a routerLink="[{ outlets: { next: 'AddPerson' } } ]" class="tile">Add Person</a>

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

I tried these values for routerLink in TransactionsIndexComponent:

1. ['', { outlets: { next: 'Add' } } ]
2. [{ outlets: { next: 'Add' } }]

None of them worked. What is the problem?

PS: The templates it self with the nested router-outlets are working, because I can open an address like /Transactions/(next:Add/(next:AddPerson)) without problems.

Answer 1

I found the problem. I missed the square brackets in [routerLink]. This works well:

<a [routerLink]="[{ outlets: { next: 'Add' } } ]" class="tile">Add</a>

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