Angular erasing all query parameters

Question

Related to but not a duplicate of: How to keep query string parameters in URL when accessing a route of an Angular 2 app?

I have a very basic Angular app, and when I add a query parameter, it's erased (from the browser's url and everywhere else it would seem) before the code hits the app.component constructor.

Note: it is on the initial load (and subsequent reloads) that query parameters appear to be stripped

Example: navigating to localhost:8081/calculator?a=1 is changed to localhost:8081/calculator

I've tried this in Angular 4.3.1, 4.4.6 and 5.0.4, with the same result.

Here's my route config:

const appRoutes: Routes = [
    {
        path: 'calculator',
        component: CalculatorComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Here's the main app component's constructor:

public constructor(private router: Router, private route: ActivatedRoute) {
    console.log('entered app constructor');
    this.route.queryParamMap.subscribe(params => {
        console.log('app', params);
    });
}

Here's the calculator component's constructor:

constructor(private router: Router, private route: ActivatedRoute) {
    console.log('entered calc constructor');
    this.route.queryParamMap.subscribe(params => {
        console.log('calc', params);
    });
}

Here's the log I see in chrome:

Why is my query parameter erased?

UPDATE I do have navigation configured in the app component like so:

let navigationExtras: NavigationExtras = {
    queryParamsHandling: 'preserve',
    preserveFragment: true
};
this.router.navigate(['/calculator'], navigationExtras);

Note that the query parameters are already gone before it gets here though...

Could this have anything to do with no query params being identified in the route? — Kay, Dec 01 '17 at 17:49
@KHAN you define parameters in the route, but not query parameters — Anders, Dec 01 '17 at 17:50
@PankajParkar I may need to do that, but first I need to solve the issue of the query parameters disappearing entirely from the url — Anders, Dec 01 '17 at 17:50
@Anders then i think you are looking for this.route.queryParams/queryParamMap? — Kay, Dec 01 '17 at 17:52
@KHAN maybe, but the query parameters have disappeared, even from the browser's url. The problem isn't *how* to retrieve the values, at least not yet. It's *where* did they go, and *why* are they gone? — Anders, Dec 01 '17 at 17:53
Its a query paramater, so im not sure they would show up in paramMap? Is paramMap not for /:id etc — Kay, Dec 01 '17 at 17:54
@KHAN I think you're misunderstanding the issue. The query parameters are *gone*. Completely. From the Url, from memory, everywhere. — Anders, Dec 01 '17 at 17:58
How are you serving this? Using `ng serve` or some kind of webserver also is involved? — Tarun Lalwani, Dec 06 '17 at 13:06
@VipinKumar I'm typing it into the address bar and hitting enter — Anders, Dec 06 '17 at 21:56

score 4 · Accepted Answer · answered Dec 06 '17 at 17:52

The issue you are having is because you are calling this.router.navigate(['/calculator'], navigationExtras); inside your app component constructor or OnInit. Remember that queryParamMap is an observable, and so when you call navigate, the call will happen before your subscriber gets called. To fix your problem, just remove the navigate call. If you want your app component to autoredirect to calculator, the simplest safe method is to just change your paths to include:

routes: Routes = [ {path: '', redirectTo: 'calculator', pathMatch: 'full'}, ... ]

There is a plunker that should illustrate this. To get routing in plunker working I used HashLocation strategy though, so make sure you use /#/... when playing.

Kay · Answer 2 · 2017-12-01T18:06:47.483

1

if you want to retrieve query paramaters, then it is done using queryParam/queryParamMap..

this.route.queryParamMap.subscribe(params => {
   console.log(params);
});

You may need to preserve the query parameters, or merge them as stated here.

https://angular.io/api/router/NavigationExtras

v4

preserveQueryParams: true

v5

queryParamsHandling: 'preserve'

edited Dec 01 '17 at 18:06

answered Dec 01 '17 at 17:57

Kay

17,906
63
162
270

1

I think you're misunderstanding the issue. The query parameters are gone. Completely. From the Url, from memory, everywhere. I'll adjust my api call, but there's a larger issue here. – Anders Dec 01 '17 at 17:59
Perhaps you are right, after adjusting you can report back. – Kay Dec 01 '17 at 18:00
Thank you - I have done that, but this happens before navigation. – Anders Dec 01 '17 at 18:04
I do want to call out that this is a very helpful answer in general, and I think would solve most people's issues. – Anders Dec 01 '17 at 18:08

Drew Rochon · Answer 3 · 2017-12-06T20:29:31.153

1

You need to assign your query params to the queryParams Object.

Try:

this.router.navigate(['/calculator'], {queryParams: {a: 1}});

or add this to your navigation extras:

let navigationExtras: NavigationExtras = {
    queryParamsHandling: 'preserve',
    preserveFragment: true,
    queryParams: {a:1}
};

edited Dec 06 '17 at 20:29

answered Dec 06 '17 at 20:15

Drew Rochon

399
2
7

1

The query parameters are already gone before any navigation apis are called – Anders Dec 06 '17 at 21:57

score 0 · Answer 4 · answered Jan 01 '19 at 09:06

This should work.

constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
    ) { }

resetUrlQueryParams(){
  this.router.navigate([], 
      {
        relativeTo: this.activatedRoute,
        queryParams: {}
      });
}

Angular erasing all query parameters

4 Answers4

Linked