Change of QueryParam not detected

[tschaka1904]

I'm submitting a ...

[ ] Regression (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

Changing the value of an QueryParam doesn't trigger an event.

Expected behavior

When I change the value of an QueryParam, I'd like to have an event triggered so the subscribe is picking up the latest data.

Minimal reproduction of the problem with instructions

I have already an existing Stackoverflow thread: change-of-queryparam-not-detected.

Basically, I subscribing to the queryParams of ActivatedRoute. From where I get my query from the URL, but also my filter options:

 ngOnInit() {
    this.route
      .queryParams
      .subscribe(queryParams => {
        this._query = queryParams['query'];
        this._heightFilter = queryParams['height'];
        this._colourFilter = queryParams['colour'];
        this._weightFilter = queryParams['weight'];
        // Do some request to WS to get the new data
      });
  }

When ever I click on a filter, lets say colour:blue, I call my reloadPage() and give the new queryparams and navigate to the same page just with the new queryparams.

private reloadPage(): void {
    this.navigationExtras.queryParams = {};
    this.navigationExtras.queryParams['query'] = this._query;
    this.prepareFiltersForParams(this.navigationExtras.queryParams);
    this.router.navigate([], this.navigationExtras);
}

  private prepareFiltersForParams(params: any): void {
    if (this._ colourFilter !== undefined && this._ colourFilter.length !== 0) {
      params['colour'] = this._ colourFilter;
    }
    if (this._heightFilter !== undefined && this._heightFilter.length !== 0) {
      params['height'] = this._heightFilter;
    }
    if (this._weightFilter !== undefined && this._weightFilter.length !== 0) {
      params['weightType'] = this._weightFilter;
    }
  }

Sticking to the filter colour:blue, this would bring me to:
www.awesome.org/search?query=AppleTree&colour=blue
But now I would like to apply another filter from criteria colour, lets say orange. To get to this kind of URL:
www.awesome.org/search?query=AppleTree&colour=blue,orange
But, unfortunately, nothing happens. It seems that the this.route.queryParams.subscribe is not picking up the change and the URL just stays like this:
www.awesome.org/search?query=AppleTree&colour=blue

If we now select now a filter from, let say height, we end up with this URL:
www.awesome.org/search?query=AppleTree&colour=blue,orange&height=170

So the value orange is stored in colour, but the change of colour is just not detected.

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

A filter functionality.

Please tell us about your environment

Angular version: 4.2.3


Browser:
- [X] Chrome (desktop) version 58.0.3029.110 (64-bit)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [X] Safari (desktop) version 9.1
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v7.4.0
- Platform:  Mac

Others:

[tschaka1904]

Seems like there was a change in #14796. Could that have an influence? I sure that this was working back in the past, but yesterday I realised it doesn't anymore.

[tschaka1904]

When calling ngOninit() instead of this.router.navigate([], this.navigationExtras); updates the view, but obviously the URL just doesn't update. So this means that the data is there, but somehow there is no event triggered or ngOninit() is just not picking it up.

[tderoo]

Experiencing the same issue on Angular 4 with repeated query string parameters. The merging of the querystring seems to be happening fine but angular does not see it as a route change apparenty. As a work-around I've added a simple integer version count which I increment every time that the route changes so that Angular picks up that the route has changed.

interface IQueryParams {
    period?: string;
    level?: Array<string>;
    source?: string;
    search?: string;
    page?: string;
}
    private v = 1; //workaround for Angular routing issue 
    updateUrl = (queryParams: IQueryParams) => this.router.navigate([], {
        queryParamsHandling: 'merge',
        queryParams: { ...queryParams, v: ++this.v } // workaround for angular routing problem
    });
    // original code which fails to trigger if only the array params change
    //updateUrl = (queryParams: IQueryParams) => this.router.navigate([],{ queryParams});

[jasonaden]

I'm sorry but reported issues require a reproduction of the issue. We suggest using StackBlitz, Plunker or Github.

If this issue persists, please create a reproduction using one of the links above. Describe the difference between the expected and current behavior in a new issue with the reproduction linked.

[polyglotinc]

thats pretty lazy to close a bug report (which still occurs in Angular5) just because you dont want to reproduce the bug yourself. This is still a bug.
I.E. this in OnInit never logs anything when going back and forth between
/foo, /foo?bar=true, /foo?bar=3

this.route.params.subscribe( params => {
      console.log("params changed",params);
});

[stephengardner]

From start to finish, this should help you out.

You need to import ActivatedRoute and Observe the changes on that.

Note the different Observables for Params vs Query Params.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'app-params-example',
    templateUrl: './app-params-example.component.html',
    styleUrls: ['./app-params-example.component.css']
})
export class AppParamsExampleComponent implements OnInit {

    constructor(private activatedRoute: ActivatedRoute) { }

    ngOnInit() {
        this.activatedRoute
            .queryParams
            .subscribe(queryParams => {
                console.log('Query Params:', queryParams);
            });
        this.activatedRoute
            .params
            .subscribe(params => {
                console.log('Regular Params:', params);
            });
    }

}

[razorch]

So was there a new issue created after it was lazily closed? The bug is still present.

[mralexandernickel]

Hi @jasonaden and @hansl (just mentioning you guys because you have been involved)...I've created a repository with all reproduction steps including all extra information I found out about this issue. It is still present in latest angular...

Here is the link to a working stackblitz example. The component with all necessary information is already opened in the editor.

I've added console.log to all important parts...

Here is the link to the repository with all reproduction-steps.
The important part is inside this component...

Is that enough information to re-open this issue? ...or should I maybe open a new one? 🙂

[mralexandernickel]

...and for all guys coming across this issue, searching for a solution:

the safest workaround for now is adding an extra parameter to your queryParams holding a random string, like this:

yourQueryParamsToUpdate.v = Math.random();

[guilhermechiara]

Unfortunately, the issue is still present in Angular 6.

[tschaka1904]

I've opened a new ticket (#27393). Basically a ticket for a ticket, but maybe that helps.

[the-avid-engineer]

@mralexandernickel Your "Bug" button is mutating the "two" array from the snapshot. If you make a deep copy of the params, and then push a new value, it works as expected.

https://stackblitz.com/edit/github-powged

Edit: So the problem is that the snapshot allows you to modify the router's state before navigating.

[mralexandernickel]

@the-avid-engineer yes, this is what i'm doing in the fourth example (in a naive way) inside the component... and yeah it is working here. weird thing is, that i'm working on a application right now, where this is not true. still trying to figure out what is different there, to also add this as a reproduction step. 🙂

[jasonaden]

For anyone on this issue complaining about "lazily closing" an issue, please watch all the issues coming into the Angular repo and look for those that would be resolved by the user producing a simple reproduction. Also, read the reason for closing the issue. @tschaka1904 didn't follow the issue template and didn't provide a valid reproduction.

Again, a new issue was filed without a reproduction, in that case simply referring to this issue.

Let me re-iterate what I said a year ago when closing this issue: If this issue persists, please create a reproduction using one of the links above. Describe the difference between the expected and current behavior in a new issue with the reproduction linked.

There's really no point in commenting on a closed issue as they almost never get looked at. Please do what was asked a year ago and create a new issue with a reproduction. It sounds like you probably have an issue to be looked at, and an issue clearly explaining what problem you're having with a reproduction and exact steps to reproduce including what you expect the behavior to be would help get it fixed.

Locking this issue.