Angular argument of type 'HttpEvent<any>' is not assignable to parameter

Question

In my authentication service,

import { Injectable } from '@angular/core';
import { HttpClient,HttpSentEvent } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { HttpHeaders } from '@angular/common/http';

import { environment } from 'src/environments/environment';
import { User } from '../_models';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
    private currentUserSubject: BehaviorSubject<User>;
    private payload:any;
    public header:any;
    public currentUser: Observable<User>;
    
 

    constructor(private http: HttpClient) {
        this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
        this.currentUser = this.currentUserSubject.asObservable();
this.header= new HttpHeaders()
        .set('Access-Control-Allow-Origin', '*')
        .set("Access-Control-Allow-Headers", "Origin, X-Requested-With")
        .set('Accept', 'application/json')
          .set('content-type', 'application/json'); 
        
    }
    
    public get currentUserValue(): User {
        return this.currentUserSubject.value;
    }
    login(name: string, password: string) {
        this.payload={ "auth": {
            "identity": {
              "methods": ["password"],
              "password": {
                "user": {
                  "name": name,
                  
                  "password": password
                }
              }
            },
            
          }
        }
        
        this.header={'Content-Type': 'application/json'}
       
      return this.http.post<any>(`${environment.apiUrl}auth/tokens`,this.payload,{headers: this.header,observe: 'response' })
            .pipe(map(response  => {
              const user = response.body;
              const token = response.headers.get('x-subject-token');
              localStorage.setItem('token', token);
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
                console.log(response.headers.get('x-subject-token'));
                //console.log(token);
                return user;
            }));
    }
    logout() {
        // remove user from local storage to log user out
        localStorage.removeItem('currentUser');
        this.currentUserSubject.next(null);
    }
}

here in the this.currentUserSubject.next(user); the user shows error as Argument of type 'HttpEvent' is not assignable to parameter of type 'User'. Type 'HttpSentEvent' is missing the following properties from type 'User': name, password

this is my model user.ts

export class User {
    
    token?: string;
    
}

   

Can anyone help in this, I'm using angular 9.

Answer 1

You have a problem while setting HttpOptions. It is a class which has a property as HttpHeaders. But you are implementing it wrong.

You need to change

this.http.post(...., this.payload, this.header)

to

const httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
this.http.post(...., this.payload, {headers: httpHeaders})

Why you are getting this error?

HttpOptions also has a property which is observe. Default value of it is body but you can set it to response. When you set it to response, Angular gives response completely (with status code, response headers, body, etc.)

I think you broke it with implementing HttpOptions wrong.

UPDATE

If you want to reach response headers you need to add observe: 'response' to the HttpOptions like

 const httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
this.http.post(...., this.payload, { headers: httpHeaders, observe: 'response' }).pipe(map(response => {
            const user = response.body;
            const token = response.headers.get('X-Subject-Token');
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('token', token);
            localStorage.setItem('currentUser', JSON.stringify(user));
            this.currentUserSubject.next(user);
            return user;
        }));