Angular 5 HttpClient: Send POST params as URL encoded string

Question

Angular 5.0.1

I'm looking at the docs for Angular HttpClient: https://angular.io/guide/http, but I can't seem to figure how to send POST params as a URLEncoded string instead of a JSON string. For instance, my Java http clients will send like this as default:

username=test%40test.com&password=Password1&rolename=Admin

But Angular wants to send as Json by default:

{"username":"[email protected]","password":"Password1","rolename":"Admin"}

Here's my code currently:

    let body = {
      username: "[email protected]",
      password: "Password1",
      rolename: "Admin"
    };

 let headers = new HttpHeaders();
    headers = headers.set("Content-Type", "application/x-www-form-urlencoded");


    this.http.post(this.baseUrl, body, {
      headers: headers,
    })
      .subscribe(resp => {
      console.log("response %o, ", resp);
    });

I've also tried adding HttpParams:

let  httpParams = new HttpParams();
httpParams.append("username", "[email protected]");
httpParams.append("password", "Password1");
httpParams.append("rolename", "Admin");

...
headers: headers,
      params: httpParams

But HttpParams seem to have no effect.

Any idea how to URL encode the request instead of Json?

Answer 1

append() returns a new HttpParams object, so you'll need to make a slight modification to your httpParams code. Try this:

let httpParams = new HttpParams()
    .append("username", "[email protected]")
    .append("password", "Password1")
    .append("rolename", "Admin");

In the code above, we chain our append calls, creating a new HttpParams object on each call. The last time we call append, the HttpParams object returned will contain all of the previously appended parameters.

Answer 2

That is because HttpParam is immutable.

You can read why here

In short:

let httpParams = new HttpParams()
    .append("username", "[email protected]")
    .append("password", "Password1")
    .append("rolename", "Admin");

Because the app may retry requests, the interceptor chain may process an individual request multiple times. If requests were mutable, a retried request would be different than the original request. Immutability ensures the interceptors see the same request for each try.