title: Angular HttpClient post not working
body: <p>I'm changing my code to change my http api from '@angular/http' to '@angular/common/http'.  Most of my requests are working fine, but the authentication that brings me the refresh token isn't working, no matter how hard I try....  Please, seem my code bellow:</p>
  
  <pre><code>    const headerHttp = new HttpHeaders();
      headerHttp.set('Content-Type', 'application/x-www-form-urlencoded');
      headerHttp.set('Authorization', 'Basic YW5ndWxhcjphbmd1bGFy');
  
      this.clientHttp.post(this.oauthTokenUrl,
        { username: user, password: pwd , grant_type: 'password' },
        {  headers: headerHttp, withCredentials: true })
          .subscribe(
        res =&gt; {
           console.log(res);
        },
        err =&gt; {
           console.log('Error occured');
        }
      );
  </code></pre>
  
  <p>But the parameters ( username, password and grant_type ) aren't being reaching the server and an input screen is popping.</p>
  
  <p><a href="https://i.stack.imgur.com/LayxQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LayxQ.png" alt="enter image description here"></a></p>
  
  <p>This is my the result of my request that works, with '@angular/http':</p>
  
  <p>IMAGE 1
  <a href="https://i.stack.imgur.com/crJLD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/crJLD.png" alt="enter image description here"></a></p>
  
  <p>This is the result of my request that doesn't work, which code I put above.</p>
  
  <p>IMAGE 2
  <a href="https://i.stack.imgur.com/qIx63.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qIx63.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT</strong> <strong>1</strong> - The authentication input screen isn´t popping up anymore with the code bellow.  </p>
  
  <pre><code>const _params = new HttpParams()
  .set('grant_type', 'password')
  .set('username', usuario)
  .set('password', senha );
  
  const _headers = new HttpHeaders()
    .set('Authorization', 'Basic YW5ndWxhcjphbmd1bGFy')
    .set('Content-Type', 'application/x-www-form-urlencoded');
  
  const httpOptions = {
    headers: _headers,
    params: _params,
    withCredentials: true
  };
  
  this.clientHttp.post&lt;String&gt;(this.oauthTokenUrl, httpOptions).subscribe(
  res =&gt; {
    console.log(res);
  },
  err =&gt; {
    console.log('Error occurred', err);
  });
  </code></pre>
  
  <p><strong>THIS</strong> is what my code used to be, and work Ok.</p>
  
  <pre><code>    const headers = new Headers();
  
      headers.append('Content-Type', 'application/x-www-form-urlencoded');
      headers.append('Authorization', 'Basic YW5ndWxhcjphbmd1bGFy');
  
      const body = `username=${usuario}&amp;password=${senha}&amp;grant_type=password`;
  
      return this.http.post(this.oauthTokenUrl, body,
          { headers, withCredentials: true })
        .toPromise()
        .then(response =&gt; {
          this.armazenarToken(response.json().access_token);
        })
        .catch(response =&gt; {
          if (response.status === 400) {
            const responseJson = response.json();
  
            if (responseJson.error === 'invalid_grant') {
              return Promise.reject('Usuário ou senha inválida!');
            }
          }
  
          return Promise.reject(response);
        });
    }
  </code></pre>
  
  <p>But now the HttpClient creates a "Request Payload" instead of a "Form Data".  Why? The servlet cannot read "Request Payload" the same way he used to read "Form Data", so it doesn't do the authentication properly.</p>
  
  <p><strong><em>EDIT 2 - The Solution</em></strong></p>
  
  <p>After a ton of tries, what make it work was a new FormData() that I put following @mtpultz suggestion.</p>
  
  <pre><code>const params = new HttpParams()
  .set('grant_type', 'password')
  .set('username', user)
  .set('password', pwd );
  
  const headers = new HttpHeaders()
    .set('Authorization', 'Basic xpto')
    .set('Content-Type', 'application/x-www-form-urlencoded');
  
  const httpOptions = {
    headers: headers,
    params: params,
    withCredentials: true
  };
  
  //The line works ( Requisition with Form Data, like IMAGE 1 above )
  this.httpClient.post&lt;Response&gt;(this.oauthTokenUrl,  new FormData(), httpOptions )
  
  //The line, without new FormData(), doesn't work.  ( Requisition with Request Payload, like IMAGE 2 above )
  this.httpClient.post&lt;Response&gt;(this.oauthTokenUrl,  httpOptions )
  </code></pre>