Query params always purport to be empty on page load even though provided

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior this.route.queryParams (with this.route being an injected ActivatedRoute, when query parameters are present in the URL, will fire once with an empty object, and then again immediately with the query params.

Expected behavior I would expect this to fire only the second time with the provided query params.

Minimal reproduction of the problem with instructions

In a component, inject ActivatedRoute and call it route in the constructor. Then:

this.route.queryParams
      .filter((queryParams: any) => {
        // Let's say the query param we're looking for is called "foo"
        return !queryParams.foo;
      })
      .subscribe(() => {
        alert('no query param called "foo"!');
      });

Then navigate to the path /?foo=bar. You should see the alert, even though the query param foo is provided.

This happens both if you run this code in a component’s constructor and ngOnInit.

What is the motivation / use case for changing the behavior? I have logic in place that appends a query param to the URL when not present. The subscription wrongly tells me there is no query param.

My current workaround is to use debounceTime, but this may introduce race conditions.

this.route.queryParams
      .debounceTime(500)
      .filter((queryParams: any) => {
        return !queryParams.foo;
      })
      .subscribe(() => {
        alert('no query param called "foo"!');
      });

Please tell us about your environment: Operating system: macOS Sierra version 10.12 IDE: Atom 1.10.2 Package manager: NPM Based on https://github.com/mgechev/angular2-seed

• Angular version: 2.0.X 2.0.0
• Browser: Chrome version 53.0.2785.143 (64-bit) Safari version 10.0 (12602.1.50.0.10)
• Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript version 1.8.10
• Node (for AoT issues): node --version =
  Not sure what AoT means, but for what it’s worth, my Node version is 4.0.0.

[vsavkin]

Unfortunately it has to work this way, and here is why:

The instantiation of the root component is static and is not controlled by the router. This means that we always have to have some activated route we can inject into that component. This activated route has to exist regardless of the URL.

That is why we always start with the empty state and then navigate into the current URL. Only the empty state is always allowed (e.g., it doesn’t have guards).

To avoid race conditions use the following workaround:

this.route.queryParams .skip(1).subscribe(...);

Closing this issue.

[dchacke]

I think it’s a good call to use a BehaviorSubject here, but what I’m saying is that its initial value is wrong if the page is opened with query params, as then there was no point in time that the page had no query params.

In other words, if you open up localhost:5555/?foo=bar, and it initially tells you there are no query params, it’s not accurately reflecting the current state of the URL. The first thing it tells you should be { foo: 'bar' }.

Otherwise, it makes it impossible to reliably determine if the page was opened without query params, without introducing a clunky workaround using something debounceTime. And when there are query params to begin with, it will first wrongly tell you that there aren’t any.