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

user_11295965 0
Viewed 3115

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.

angular postman typescript
1 Answers

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

user_26143130
Related