URLSearchParams including ? on the first parameter

[MortimerCat]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
As expected, I see an array containing all my parameters. The problem is that the first parameter includes a "?".

http://example.com/create?email=[e-mail]&message=Invalid&success=false
gives output of...
[[Entries]]
Array[3]
{"?email" => Array[1]}
{"message" => Array[1]}
{"success" => Array[1]}

Expected behavior
Would expect output with no extraneous characters
[Entries]]
Array[3]
{"email" => Array[1]}
{"message" => Array[1]}
{"success" => Array[1]}

Minimal reproduction of the problem with instructions
Navigate to url like
http://example.com/create?email=[e-mail]&message=Invalid&success=false

const params = new URLSearchParams(window.location.search);
console.log(params);

What is the motivation / use case for changing the behavior?
Having a random "?" is not useful!

Please tell us about your environment:
Ubuntu, running VSCode

• Angular version: 2.0.X
  @angular/cli: 1.0.0-beta.31
  node: 7.4.0
  os: linux x64
  @angular/common: 2.4.7
  @angular/compiler: 2.4.7
  @angular/core: 2.4.7
  @angular/forms: 2.4.7
  @angular/http: 2.4.7
  @angular/platform-browser: 2.4.7
  @angular/platform-browser-dynamic: 2.4.7
  @angular/router: 3.4.7
  @angular/cli: 1.0.0-beta.31
  @angular/compiler-cli: 2.4.7

• Browser:
  All browsers

• Language:
  Typescript Version 2.1.5

[Dzmitry Shylovich]

Pls add a plunkr

[Levente Morva]

window.location.search does not only return the query string. It has the question mark prepended to it, but that character is not actually part of the query string. URLSearchParams - by design - works only on query strings.

The simple solution here is to trim that character before giving it to URLSearchParams.

[MortimerCat]

I have been unable to get plunkr to retrieve any data using URLSearchParams. Don't know if its just me or the way plunkr works?

I now appreciate why its not working - the "?" is not technically part of a query string. The quick fix is as follows.
const params = new URLSearchParams(window.location.search.slice(1));

I am confused about where the official documentation exists for the function, but there are plenty of examples online showing URLSearchParams(window.location.search) as an example usage, including one I saw that claimed the ? is removed.

As far as the bug report goes, I still think that the function should handle URLSearchParams(window.location.search) without further tweaking on the developer side.

[Dzmitry Shylovich]

are you talking about native or angular impl of URLSearchParams?

[Levente Morva]

@MortimerCat The specification for the parsing of application/x-www-form-urlencoded can be found here, which is defined to be used by URLSearchParams in case the initialization parameter is a string. Angular's implementation complies with this correctly.

To create a new URLSearchParams object, optionally using init, run these steps:

• Let query be a new URLSearchParams object.
  [...]
• Otherwise, init is a string, then set query’s list to the result of parsing init.
• Return query.

I don't know about the implementation of browsers, but this is what the specification defines. Browsers (and Angular) might implement the trimming of the ? character so as to make the algorithm fault-tolerant, but this is not something defined by the official specifications.

[MortimerCat]

I have been referring to the Angular implementation, although realising I may picked up examples from other implementations.

Okay, I accept it is acting as per spec and make the comment that trimming the ? would be a useful addition to its fault tolerance!

[Sebastián Ramírez]

I created a PR to solve this here: #19711

And to solve the same problem when using HttpClientModule and HttpClient: #19710 .

But they have been there waiting to be reviewed since October.

---

So, I created a package to solve it (at least while it is reviewed / merged) for the case of HttpClient. It's a simple drop-in replacement that modifies the minimum to fix the problem. It works with just changing one import.

Check it here: https://github.com/tiangolo/ngx-http-client

[Trotyl Yu]

Obsolete since URLSearchParams (Angular's) has been deprecated, while HttpParams does NOT support parsing string yet (#20316).

[Alex Rickabaugh]

As @trotyl says, we unfortunately won't be making any fixes to @angular/http as it's deprecated and will be removed soon.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}