Type 'Observable<ArrayBuffer>' is not assignable to type 'Observable<HttpResponse<User>>'

Issue

good evening, I'm trying to set up a authentication service and the login function keeps showing this error:

Type 'Observable' is not assignable to type 'Observable<HttpResponse>'. Type 'ArrayBuffer' is missing the following properties from type 'HttpResponse': body, type, clone, headers, and 4 more.

function is as follows:

  login(user:User): Observable<HttpResponse<User>>{
    return this.http.post<User>(`${this.apiUrl}/login`, user, {observe: Response});
  }

the user model interface is :

export interface User {
    username: string;
    password:string;
}

and I'm calling this function is my login component:

onLogin(user: User):void{
  this.subs.add(
  this.authService.login(user).subscribe(
    (response) =>{
      this.authService.addTokenToCache(response.headers.get('Jwt-Token') || '{}');
      // this.authService.addUserToCache(response.body|| '{}');
      this.router.navigateByUrl("/home");
      this.showLoading=false;
    },
    (error: HttpErrorResponse)=>{
      alert(error.message);
      this.showLoading=false;
    }
  ))
}

how exactly can I fix this ?

Solution

You are actually now using the fetch api interface Response and that is why you are getting this error. The observe options are 'body', 'events' or 'response'. Notice the lowercase r in response and that it is also a string. That being said, your code should be:

return this.http.post<User>(`${this.apiUrl}/login`, user, {observe: 'response'});

Answered By - AT82