Navigating with outlets is confusing: outlets map does not apply to consumed segments

I’m submitting a …

[X] bug report

Current behavior

I have some routes like:

const routes = [
    { path: "", component: HomeComponent, pathMatch: "full" },
    { path: "profile", component: ProfileComponent },
    { path: "menu", component: MenuComponent, outlet: "sidebar" },
];

When the route http://localhost/(sidebar:menu) is open, then I’m able to remove the named outlet and go to http://localhost/ by clicking an anchor like the following:

<a [routerLink]="['', {outlets: {sidebar: null}}]">
    Close
</a>

What doesn’t work is navigating away from the sidebar and also going to another route like http://localhost/profile.

<a [routerLink]="['/profile', {outlets: {sidebar: null}}]">
    Close
</a>

The link that is rendered is http://localhost:3971/profile(sidebar:menu)

Expected behavior

The link that should be rendered is http://localhost:3971/profile.

Repro

https://github.com/tinchou/router-repro

Please tell us about your environment:

Windows 10, Visual Studio 2017

• Angular version: 2.3.1 (didn’t work with 2.1.0 either)

• Browser: all

• Language: TypeScript 2.0.10

[bennadel]

For what it’s worth, I was able to get this working by using the parent component’s ActivatedRoute instance (this.activatedRoute.parent) in the router.navigate() method. I wrote up my approach here.

[colltoaction]

Update: Router.navigate doesn’t work either. E.g. the following doesn’t work:

this.router.navigate(["/profile", { outlets: { sidebar: null } }]);

Workaround: add a click handler and call navigate a second time, but only after the first one completes.

this.router.navigate(["/profile"]).then(() =>
            this.router.navigate([".", { outlets: { sidebar: null } }]));