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!!

Answer 2

The above works when the primary navigation is absolute on the primary route. The problem I am having is: how to do a relative navigation on the primary route, while clearing the secondary route.

I have tried different combinations but none seem to work:

starting at https://localhost:4200/one/two(popup:some/other)

    this.router.navigate([
      '',
      {
        outlets: {
          primary: ['areaTwo', 'second'],
          popup: null,
        },
      },
    ]);

ending at https://localhost:4200/areaTwo/second

So it clears the secondary popup, and it does an absolute navigation.

starting at https://localhost:4200/one/two(popup:some/other)

    this.router.navigate([
      {
        outlets: {
          primary: ['areaTwo', 'second'],
          popup: null,
        },
      },
    ], { relativeTo: this.activatedRoute });

ending at https://localhost:4200/one/two/areaTwo/second(popup:some/other)

So it does a relative on the primary, but does not clear the secondary.

But how can we do something like:

starting at https://localhost:4200/one/two(popup:some/other)

ending at https://localhost:4200/one/two/areaTwo/second