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.

Milan Tenk · Accepted Answer · 2021-01-13 20:30:24Z

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, 2021 at 20:30

Milan Tenk

2,7681 gold badge20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

EsoMars Over a year ago

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.

Milan Tenk Over a year ago

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: rxjs-dev.firebaseapp.com/guide/observable

Milan Tenk Over a year ago

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: medium.com/angular-in-depth/…

EsoMars Over a year ago

Perfect! Thank you for your time! It is clear now.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related