Type Headers is not assignable to type HttpHeaders in TypeScript and Angular 9

Question

I am new to TypeScript and am learning to do a simple authentication tutorial. For the backend I am using Express, and frontend I am using Angular 9. I researched the error a lot as there are good resources online but I could not understand why none applied to my case.

I receive the following error:

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'.

19 return this.httpCient.post('http://localhost:3000/users/register', user, {headers: headers}).pipe(map(res => res));

So on both functions registerUser(user) and authenticate(user) the errors seems to be in this line:

return this.httpCient.post('http://localhost:3000/users/authenticate', user, {headers: headers}).pipe(map(res => res));

Below the code that is causing the issue:

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 => 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 => res));
  }
}

I found this post to help me solve the problem but did not work because I am using Angular 9 and the http module is now replaced with HttpClient, HttpHeaders from '@angular/common/http';. So I was able to follow and partially solved it.

This was useful too as general knowledge but it deals with Angular 2 and could not find a useful answer.

Please if anyone had the same error please share how to solve it.

score 5 · Accepted Answer · answered Jan 13 '21 at 20:30

5

The HttpClient expects HttpHeaders as parameter. (Headers object was used before the HttpClient was introduced and it is not compatible with the HttpClient.) So for example following could work:

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
});
return this.httpClient.post('http://localhost:3000/users/authenticate', user, httpOptions);

See some more details and example here: https://angular.io/guide/http#adding-headers

Don't forget to subscribe to the returned Observable because otherwise the request will not be sent. (Observables are lazy.)

answered Jan 13 '21 at 20:30

Milan Tenk

2,415
1
17
24

Thanks I see what happened. Can you please explain what you mean with "Don't forget to subscribe to the returned Observable" in order to take care of the request please? Thanks for your time. – EsoMars Jan 13 '21 at 20:45
The `registerUser` and `authenticateUser` funtions return an `RxJS` `Observable` because the methods of `HttpClient` return it. If you have an `Observable` you need to have a subscription for it, for example this way: `observable.subscribe(x => console.log(x));`. If there is no subscription to an Observable the logic of it won't be executed. See the details about `Observables` here: https://rxjs-dev.firebaseapp.com/guide/observable – Milan Tenk Jan 13 '21 at 20:51
And also if you have subscriptions to `Observable` objects don't forget to unsubscribe from them to avoid potential memory leaks. See a nice summary about this topic here: https://medium.com/angular-in-depth/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0 – Milan Tenk Jan 13 '21 at 20:53
1

Perfect! Thank you for your time! It is clear now. – EsoMars Jan 13 '21 at 20:57

Type Headers is not assignable to type HttpHeaders in TypeScript and Angular 9

1 Answers1