How to use a named router-outlet inside a primary router-outlet?

Question

I have a primary router-outlet (inside my side-nav component) and I created other two router-outlet inside this one.

I got something like this.

   router-outlet (primary) {

       router-outlet name='info' { }

       router-outlet name='services' {

          the path I want to navigate only inside this outlet

       }
    }

I believe there is something wrong here:

<button [routerLink]="[{ outlets: { primary: { services: ['view'] }}}]"> Go to services view</button>

I coded a simple version on stackblitz

https://stackblitz.com/edit/router-outlet-doubt

I expect navigate to view-service component, may somebody help me?

Answer 1

Secondary child outlet inside empty primary segment does not match

it is a known problem and not fixed yet. There is an open issue you can check at github.

There is a workaround you check on stackblitz

And I rewrote your code and now it works. check here stackblitz

what I have changed so far.

1. I changed the empty parent to a router called app which refer to the BudgetsComponent as it is workaround for the problem.

2. Change the view routerLink as follows

   <button [routerLink]="[{outlets: {services: ['view']}}]"> Go to services view</button>

   where services is the outlet name and view is the routing path.