Angular 6 removes query string from url

Question

Example

http://localhost:4200/login?aUasas129198

resolves to

http://localhost:4200/login

What should I do if I want the value after '?'

I tried doing

{ path: 'login/:id', component: LoginComponent },

But it did not work

I also tried

console.log(this.route.snapshot.queryParams);
console.log(this.route.snapshot.params);

But they both return empty object. What should I do now please help

Do you still see the query param in the url though? Doing login/:id makes id a queryParam. You should also be using this.route.queryParams.subscribe(queryParams => console.log(queryParams)) Also, apparently there's no value of the queryParam that you're specifying. — SiddAjmera
– SiddAjmera, Commented Sep 24, 2018 at 9:54
No I can't the part after '?' comes from another solution and I need to interpret the data after '?'. I do not have any choice — Sanjay Idpuganti
– Sanjay Idpuganti, Commented Sep 24, 2018 at 9:58
Use param instead of a queryParam in that case. Also make sure to subscribe to route.params instead of using route.snapshot.params — SiddAjmera
– SiddAjmera, Commented Sep 24, 2018 at 10:00

Anton Strogonoff · Accepted Answer · 2018-09-24 10:39:30Z

2

If it’s unavoidable that Angular redirects you immediately and loses the query parameters, you could subscribe to router events and on each NavigationStart for login route get a hold of route’s queryParamMap or snapshot.paramMap before they’re lost in redirection, then you can e.g. pass it to a service and do whatever you wanted to do with it.

Or, as another alternative, you could look into configuring your router with queryParamsHandling: 'preserve', in which case it should pass the query params to the next route (see the section in Angular docs linked below for more on this).

I worked with a project that made use of query params in Angular 5, IIRC I don’t think it would redirect on its own so I’d recommend to look elsewhere in your project but I may be wrong.

Comments

Rohit Sharma · Accepted Answer · 2018-09-24 10:05:26Z

2

Actually, You are not passing the value in any key:

http://localhost:4200/login?aUasas129198

The proper way should be:

http://localhost:4200/login?anykey=aUasas129198
// get it as
// this._ActivatedRoute.queryParams.subscribe()

If you are using the URI as you shown in your question as:

{ path: 'login/:id', component: LoginComponent }

Then you should pass the value to id as:

http://localhost:4200/login/aUasas129198
// remember the '/' after the login that you didn't use.
// get it as
// this._ActivatedRoute.snapshot.params.id

answered Sep 24, 2018 at 10:05

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

2 Comments

Sanjay Idpuganti Over a year ago

As I said in the comments I cannot change the url structure. Is there a way in angular to interpret url without proper query param key?

Rohit Sharma Over a year ago

@SanjayIdpuganti As you said, I can't change the part after '?', but you can change before ?.

Collectives™ on Stack Overflow

Angular 6 removes query string from url

2 Answers 2

See also

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

See also

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related