How to keep query string parameters in URL when accessing a route of an Angular 2 app?

Question

I have an Angular 2 test app running the latest alpha (37). There are just three routes, that look like this:

@RouteConfig([
  { path: '/', component: Home, as: 'home' },
  { path: '/errors', component: Errors, as: 'errors' },
  { path: '/about', component: About, as: 'about' }
])

I can access the routes, and when I place query string params in the URL I can read them just fine. However, a few instants after I read the parameters, I noticed that the route loads fine and the URL refreshes, removing the query string parameters.

In other words, accessing this route:

http://localhost:5555/errors?test=abc

Loads the /errors route, but right after the application loads the URL turns into:

http://localhost:5555/errors

That would be confusing to a user. I would like to keep the query string parameters in the URL.

I know, it's in alpha, but is this a bug or I forgot to set something up on the router? How can I keep whatever query string parameters in the URL?

Thanks!

binarious · Accepted Answer · 2015-10-14 14:50:59Z

1

This is fixed in Alpha 41. The query string is now persisted.

answered Oct 14, 2015 at 14:50

binarious

4,58828 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tom10271 Over a year ago

I got exactly the same problem in Angular 2.0.0 beta 12

binarious Over a year ago

@aokaddaoc Can't reproduce in beta 15. This was the original issue github.com/angular/angular/issues/4413. Feel free to comment there or open another issue.

Anders Over a year ago

Reproduced on Angular 4.3.1, 4.4.6 and 5.0.4: stackoverflow.com/questions/47598762/…

Ric K · Accepted Answer · 2016-11-21 07:11:02Z

1

Updating for Angular 2:
To preserve query parameters present in the current url, add

// import NavigationExtras 
import  { NavigationExtras } from '@angular/router';

// Set our navigation extras object
// that contains our global query params

let navigationExtras: NavigationExtras = {
      preserveQueryParams: true
    };   

// Navigate to the login page with extras
this.router.navigate(['/someLink'], navigationExtras);

For more info, check here:

answered Nov 21, 2016 at 7:11

Ric K

6881 gold badge6 silver badges16 bronze badges

1 Comment

awebdev Over a year ago

This won't work for direct linking from outside of the site though.

prabhatojha · Accepted Answer · 2016-11-23 09:52:26Z

0

Try this this.router.navigate(['target'], {preserveQueryParams: true});

answered Nov 23, 2016 at 9:52

prabhatojha

2,1051 gold badge18 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to keep query string parameters in URL when accessing a route of an Angular 2 app?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related