title: Type Headers is not assignable to type HttpHeaders in TypeScript and Angular 9
body: <p>I am new to <code>TypeScript</code> and am learning to do a simple authentication tutorial. For the backend I am using <code>Express</code>, and frontend I am using <code>Angular 9</code>. I researched the error a lot as there are good resources online but I could not understand why none applied to my case.</p>
  <p>I receive the following error:</p>
  <blockquote>
  <p>Error: src/app/services/auth.service.ts:19:79 - error TS2769: No
  overload matches this call.   The last overload gave the following
  error.
  Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; } | undefined'.
  Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'.
  Index signature is missing in type 'Headers'.</p>
  <p>19     return
  this.httpCient.post('http://localhost:3000/users/register', user,
  {headers: headers}).pipe(map(res =&gt; res));</p>
  </blockquote>
  <p>So on both functions <code>registerUser(user)</code> and <code>authenticate(user)</code> the errors seems to be in this line:</p>
  <pre><code>return this.httpCient.post('http://localhost:3000/users/authenticate', user, {headers: headers}).pipe(map(res =&gt; res));
  </code></pre>
  <p>Below the code that is causing the issue:</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { map } from 'rxjs/operators';
  
  @Injectable({
    providedIn: 'root'
  })
  export class AuthService {
    authToken: any;
    user: any;
  
    constructor(private httpClient: HttpClient) { }
  
  
    registerUser(user) {
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      return this.httpClient.post('http://localhost:3000/users/register', user, {headers: headers}).pipe(map(res =&gt; res));
    }
  
    authenticateUser(user) {
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      return this.httpClient.post('http://localhost:3000/users/authenticate', user, {headers: headers}).pipe(map(res =&gt; res));
    }
  }
  </code></pre>
  <p>I found <a href="https://stackoverflow.com/questions/44735960/argument-of-type-headerheader-is-not-assignable-to-parameter-of-type-requ">this post</a> to help me solve the problem but did not work because I am using <code>Angular 9</code> and the <code>http</code> module is now replaced with <code>HttpClient, HttpHeaders</code> from <code>'@angular/common/http';</code>. So I was able to follow and partially solved it.</p>
  <p><a href="https://stackoverflow.com/questions/43205570/angular2-http-requestoptions-headers">This</a> was useful too as general knowledge but it deals with <code>Angular 2</code> and could not find a useful answer.</p>
  <p>Please if anyone had the same error please share how to solve it.</p>