Angular router navigate with outlets not routing

Question

I am using Angular 6. I have 2 router outlets a primary and a named. For a navigation to a route I need to navigate from a component not the template. If I ignore the outlets can call with a typical router.navigate the primary is loaded without issue:

this.router.navigate(['sp/auth', { "myid": obj.code }]);

But if I try this defining the outlet I just get redirected to a non matching route.

this.router.navigate([{
            outlets: {
                primary: ['sp/auth', obj.code ]
            }
        }]);

Ultimately I will add the second named outlet to this call but I cannot get it to function with just the primary. I have tried prefixing with / (aboslute) but this just gets url encoded when looking at the router trace.

This is the route

{path: 'sp/auth/:spID', component:SpAuthComponent},

The outlets work for other pages that use the routerLink. It is just when using the router.navigate in the component that the route is not found. I must be missing something.

I suspect you could try this: this.router.navigate(['/', { outlets: { primary: ['sp/auth', obj.code ] } }]); (note the '/' as first argument of the array) — maxime1992

Gurnard Gurnard · Accepted Answer · 2021-06-23T15:09:32

Following @maxime1992 I added the absolute prefix but it still did not function. What I needed to do was replace the slash in the route (in the route tracer they were uri encoded which seemed strange).
So if I add the slash prefix and change the route name from sp/auth to spauth it works fine, also remove any slash from the secondary view route.

Angular router navigate with outlets not routing

1 Answers