Angular secondary routes - Can't navigate & clear secondary route in the same navigate call?

Question

I'm having an issue where it appears I can't navigate to a new route, and clear an outlet / secondary route at the same time.

Calling those two actions separately works - but feels like a workaround. Is there good reason why they should be done as two calls? Or is there an error in my implementation? Or should I file it as a GitHub issue?

These 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 doesn't clear the outlet:

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

My current work-around is:

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

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

Answer 1

You need to explicitly set primary outlet path like below,

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

Updated your Plunker!!

Hope this helps!!