[HTTPClient] Incorrect URI encoding for params

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Context

HTTPClient

Current behavior

When adding a param to a HTTP GET request, a colon : is not encoded to its UTF-8 value %3A.

Expected behavior

When adding a param to a HTTP GET request, a colon : is encoded to it’s UTF-8 value %3A.

Minimal reproduction of the problem with instructions

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { url } from 'config/main';

@Injectable()
export class ExampleService {
  constructor(private http: HttpClient) { }

  makeRequest(): void {
    return this.http.get('http://url.com', {
      params: {
        param: '$:test',
      },
    });
  }
}

Expected request

http://url.com?param=%24%3atest

Actual request

http://url.com?param=%24:atest

What is the motivation / use case for changing the behavior?

It seems as though the encodeURI function is being used on parameters in order to translate them to UTF-8 strings as opposed to the more appropriate encodeURIComponent function

Environment

Angular version: X.Y.Z


Browser:
- [x] Chrome (desktop) version 64.0.3282.119
 
Others:

[lucipacurar]

I’m still experiencing this bug on Angular 6.0.3. Isn’t it fixed already?

In my case I’m sending a date string to the server: 2018-06-14T10:20:42+03:00 as a URL param and it doesn’t get encoded at all.

[henriquezago]

I’m having problems with the + character.