Angular 12 - Error : No overload matches this call. Overload 1 of 5

Question

The following is my code:

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  isAuth$ = new BehaviorSubject<boolean>(false);
  token!: string ; 
  userId!: string;

  constructor(private router: Router,
    private http: HttpClient) { }


  createNewUser(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post(
        'http://localhost:3000/api/auth/signup',
        { email: email, password: password })
        .subscribe(
          () => {
            this.login(email, password).then(
              () => {
                resolve();
              }
            ).catch(
              (error) => {
                reject(error);
              }
            );
          },
          (error) => {
            reject(error);
          }
        );
    });
  }

  login(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post(
        'http://localhost:3000/api/auth/login',
        { email: email, password: password })
        .subscribe(
          (authData: { token: string, userId: string }) => {  //====> Error 
            this.token = authData.token;
            this.userId = authData.userId;
            this.isAuth$.next(true);
            resolve();
          },
          (error) => {
            reject(error);
          }
        );
    });
  }

  logout() {
    this.isAuth$.next(false);
    this.userId = null!;
    this.token = null!;
  }
}

Error description:

No overload matches this call. Overload 1 of 5, '(next: null, error: (error: any) => void, complete?: () => void): Subscription', gave the following error. Argument of type '(authData: { token: string; userId: string;}) => void' is not assignable to parameter of type 'null'.
Overload 2 of 5, '(next?: (value: Object) => void, error?: (error: any) => void, complete?: () => void): Subscription', gave the following error. Argument of type '(authData: { token: string; userId: string;}) => void' is not assignable to parameter of type '(value: Object) => void'. Types of parameters 'authData' and 'value' are incompatible. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Type 'Object' is missing the following properties from type '{ token: string; userId: string; }': token, userId

The following is my code

Error description

Answer 1

You have to specify the response data type that is expected to receive for this.http.post.

Solution 1: Specify as { token: string, userId: string } type

login(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post<{ token: string, userId: string }>(
        'http://localhost:3000/api/auth/login',
        { email: email, password: password })
        .subscribe(
          (authData: { token: string, userId: string }) => { 
            this.token = authData.token;
            this.userId = authData.userId;
            this.isAuth$.next(true);
            resolve();
          },
          (error) => {
            reject(error);
          }
        );
    });
  }

Solution 2: Specify as any type

login(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post<any>(
        'http://localhost:3000/api/auth/login',
        { email: email, password: password })
        .subscribe(
          (authData: { token: string, userId: string }) => { 
            this.token = authData.token;
            this.userId = authData.userId;
            this.isAuth$.next(true);
            resolve();
          },
          (error) => {
            reject(error);
          }
        );
    });
  }