Router navigateByUrl does not consistently apply queryParams

[jinder]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

In certain scenarios, navigateByUrl does not apply query params.

Expected behavior

It should always apply query params.

Minimal reproduction of the problem with instructions

Plunkr provided here: http://plnkr.co/edit/846in1yy0rjneOR5YbXD

Click the two buttons at the top to see the difference in behaviour.

What is the motivation / use case for changing the behavior?

Environment

Angular version: 4.3.5

Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

[jinder]

@vicb @jasonaden could you confirm if this is expected behaviour or not?

[johnny-mh]

same issue. navigateByUrl doesn't apply queryParams.

[kingkassem]

same issue

[soulfresh]

For me, this worked (maintained the query params in navigation events):

this.router.navigateByUrl(
  this.router.createUrlTree(
    ['some/route'], {queryParams: myParamObject}
  )
);

But this did not (navigation events did not contain the query param string):

this.router.navigateByUrl('some/route', {queryParams: myParamObject});

[jasonaden]

This is an unfortunate issue with the documentation. The navigateByUrl command documentation says it will Navigate based on the provided url. This URL can be either a string or a UrlTree. What it doesn't say is it ignores most of the NavigationExtras. It only looks at skipLocationChange and replaceUrl, neither of which actually modify the URL.

The navigate command will operate on navigationExtras.queryParams to create a new URL tree, then internally calls navigateByUrl with that new URL Tree.

I've created a task to get this sorted out. Either by deprecating NavigationExtras and providing the correct API surface area, or at least clarifying in the documentation.