Angular application suppresses queryParams

Question

• @angular/core: 7.2.16
• @angular/router: 7.2.16

I am trying to put various optional arguments into the queryParams of a route, but for some reason they popup shortly and get vanished again (as I am able to observe in the address bar of Chrome). Here is the setup of my component:

ngOnInit() {
    this.paginator.page.subscribe(() => {
      console.log(`this.paginator.pageIndex: ${this.paginator.pageIndex}`);
      this.router.navigate([], {
        relativeTo: this.activatedRoute,
        queryParams: { page: this.paginator.pageIndex },
        queryParamsHandling: 'merge',
      });
    });

    this.activatedRoute.queryParams.subscribe((params) => {
      console.log(`params.page ${params.page}`);
    });

    this.router.events.subscribe((event) => {
      console.log(event);
    });
  }

which produces the following output in my VSCode Debug Console:

this.paginator.pageIndex: 2
src/app/tiles/consumption-report/consumption-report-view-events/consumption-report-view-events.component.ts:142
t {id: 4, url: '/consumptionReportManagement/viewEvents?page=2', navigationTrigger: 'imperative', restoredState: null}
t {id: 4, url: '/consumptionReportManagement/viewEvents?page=2', urlAfterRedirects: '/consumptionReportManagement/viewEvents?page=2', state: t}
t {id: 4, url: '/consumptionReportManagement/viewEvents?page=2', urlAfterRedirects: '/consumptionReportManagement/viewEvents?page=2', state: t}
t {id: 4, url: '/consumptionReportManagement/viewEvents?page=2', urlAfterRedirects: '/consumptionReportManagement/viewEvents?page=2', state: t, shouldActivate: true}
params.page 2
src/app/tiles/consumption-report/consumption-report-view-events/consumption-report-view-events.component.ts:138
e {snapshot: e}
e {snapshot: e}
e {snapshot: e}
e {snapshot: e}
e {routerEvent: t, position: null, anchor: null}
t {id: 5, url: '/consumptionReportManagement/viewEvents', navigationTrigger: 'imperative', restoredState: null}
t {id: 4, url: '/consumptionReportManagement/viewEvents?page=2', urlAfterRedirects: '/consumptionReportManagement/viewEvents?page=2'}
t {id: 5, url: '/consumptionReportManagement/viewEvents', urlAfterRedirects: '/consumptionReportManagement/viewEvents', state: t}
t {id: 5, url: '/consumptionReportManagement/viewEvents', urlAfterRedirects: '/consumptionReportManagement/viewEvents', state: t}
t {id: 5, url: '/consumptionReportManagement/viewEvents', urlAfterRedirects: '/consumptionReportManagement/viewEvents', state: t, shouldActivate: true}
params.page undefined
src/app/tiles/consumption-report/consumption-report-view-events/consumption-report-view-events.component.ts:138
e {snapshot: e}
e {snapshot: e}
e {snapshot: e}
e {snapshot: e}
e {routerEvent: t, position: null, anchor: null}
t {id: 5, url: '/consumptionReportManagement/viewEvents', urlAfterRedirects: '/consumptionReportManagement/viewEvents'}

As you can see queryParams get modified twice, once with the right arguments and then another time without the arguments. The same thing happens when I enter arguments via the address bar.

I tried the following things to resolve this issue

• Remove all guards from all of the routes (RouterModule.forRoot(appRoutes))
• I tried to track down where the routing events without the right queryParams come from in the debugger (without success, maybe due to a lack of knowledge)
• I checked every router.navigate or router.navigateByUrl project wide to see if there is some side effects
• Different variations of router.navigate with queryParamsHandling: 'merge' or queryParamsHandling: 'preserve', router.navigate(['.'], ..., etc.
• I googled for more than 5 hours without finding a hint that resolved my problem

I am developing some components as part of a bigger application but none of my coworkers are using queryParams and nobody has an idea why the app behaves like that.

Answer 1

I checked every router.navigate or router.navigateByUrl project wide to see if there is some side effects

I did this again and actually found the problem. So it's resolved.