As a newcomer to TypeScript, I have been working on a basic authentication tutorial. My choice for the backend is Express, and for the frontend, I am utilizing Angular 9. Despite extensive online research, I couldn't find a solution that matched my particular case.
The error message I encountered reads as follows:
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));
This issue seems to stem from the same line of code within both the functions registerUser(user) and authenticate(user):
return this.httpCient.post('http://localhost:3000/users/authenticate', user, {headers: headers}).pipe(map(res => res));
Here's the problematic segment of 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 => 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));
}
}
While attempting to resolve this issue, I came across a related post, but it didn't provide a suitable solution due to the usage of Angular 9 and the substitution of HttpClient, HttpHeaders for '@angular/common/http';. However, I managed to make some progress based on the information provided.
Another resource that I found useful was this one, which although targeted towards Angular 2, offered some general insights but unfortunately, didn't offer a direct resolution to my problem.
If anyone has encountered a similar error and found a solution, I would greatly appreciate your input.