Angular secondary routes. Can't move and clear the secondary route with the same navigation call?

Question

I had a problem, when it appears, I cannot go to the new route and at the same time clear the exit / secondary route.

Calling these two actions separately works - but it seems like a workaround. Is there a good reason why they should be executed as two calls? Or is there a mistake in my implementation? Or should I point it out as a GitHub issue?

They work independently:

// Navigate to `/second` this._router.navigate(['/second']); // Clears the `popup` outlet this._router.navigate(['', {outlets: { popup: null }}]); 

I thought this should work, but it does not clear the output:

 this._router.navigate(['/second', {outlets: { popup: null }}]); 

My current job:

 this._router.navigate(['', {outlets: { popup: null }}]).then(() => { this._router.navigate(['second']); } ); 

I created a proof of plnkr concept - the navigation code is in global-popup.component.ts

Answer 1

You need to explicitly specify the path to the primary exit, as shown below,

 public closeAndNav_singleCall() { return this._router.navigate([{ outlets: { primary : ['second'], popup: null } }]); } 

Updated Plunker !!

Hope this helps!