Angular - this.useraccount.next(user) then Error An argument of type 'HttpResponse<any>' is not allowed against a balance of 'Useraccount'

Issue

I put this.useraccountsubject(user) to interpolate information on login, but I get an error :

ErrorType: this.useraccount.next(user) then Error An argument of type 'HttpResponse' is not allowed against a balance of 'Useraccount'

auth service.ts :

export class AuthService {
  
  private useraccountSubject: BehaviorSubject<Useraccount> =
  new BehaviorSubject<Useraccount>(new Useraccount("", "", "", "", ""));
  public user: Observable<Useraccount> = 
   this.useraccountSubject.asObservable();
   isLoggedIn = new BehaviorSubject(false);

   constructor(private http:HttpClient, private router:Router){
      this.useraccountSubject = 
            new BehaviorSubject<Useraccount>(null as any);

      this.user = this.useraccountSubject.asObservable();

      if(sessionStorage.getItem("USER")){ 

        const user =sessionStorage.getItem("USER");

      if(user){
        this.useraccountSubject.next(JSON.parse(user));
      }

     }

   }

   private handleError(err: HttpErrorResponse) {

     if (err.status === 200) {
        console.error('Error:',err.error.data)
     } else {
        console.error(`Backend error ${err.status}`)
     }

     return throwError(err);
   }

   private handleErrorsingup(err: HttpErrorResponse) {
     if (err.status === 201) {
       console.error('Error:',err.error.data)
     } else {
       alert('faild');
       console.error(`Backend error ${err.status}`)
     }

     return throwError(err);
   }

   login(username:string,password:string){ 
      const params = new FormData();
      params.append('username', username);
      params.append('password', password);

      return this.http.post<any>(`${baseUrl}/signin/`, params, { observe:'body', withCredentials: true})
    .pipe(map(user=>{
     
      catchError(this.handleError)

      //edit !!
      this.useraccountSubject.next(user);
      sessionStorage.setItem("USER", JSON.stringify(user));

      this.isLoggedIn.next(true);

      return user;
    }));
   }
     
   signup(email:string,password:string,name:string ){
     const params = new FormData();
     params.append('email', email);
     params.append('password', password);
     params.append('name', name);

    return this.http.post<any>(`${baseUrl}/signup/`, params, { observe:'body', withCredentials: true })
    .pipe(
      catchError(this.handleErrorsingup)
     );
   }
    

   logout(){
      return this.http.post<any>(`${baseUrl}/signout/`, {})
       .subscribe(response => {
          this.isLoggedIn.next(false);
          this.useraccountSubject.next(null as any)
          sessionStorage.clear();

          this.router.navigate(['login']) 
      })
   }

 //edit
 setUseraccount(user: Useraccount): void {
    this.useraccountSubject.next(user);
 }

 getUseraccount(): Observable<Useraccount> {
    return this.useraccountSubject;
 }
}

The format 'HttpResponse' does not have id, username, name, password, email attributes in the format 'Useraccount'.

Useraccount.ts:

export class Useraccount{
  constructor(
    public id:string,
    public username: string,
    public name: string,
    public password: string,
    public email: string
){}
}

I have for that format Useracount.ts

header.ts

export class HeaderComponent implements OnInit {
   private userSubject: BehaviorSubject<Useraccount> = new   
 BehaviorSubject<Useraccount>(new Useraccount("", "", "", "", ""));


   user:Observable<Useraccount> = this.userSubject.asObservable();

  loginStatus?: boolean;
  constructor(private authservice:AuthService) {



}

  ngOnInit(): void {

   this.authservice.getUseraccount().subscribe(res => {
  if (res === null) {

     // handler error

     console.log(this.user);
  } else {
   
    let useraccountSubject: Useraccount = new Useraccount(res.id, res.username, res.email, res.password, res.name);

     this.userSubject.next(useraccountSubject);
  }
});

   this.authservice.isLoggedIn.subscribe((status:any) => {
   this.loginStatus = status;
   });
 }
 logout($event: any){
$event.stopPropagation();
this.authservice.logout();
}
}

header.html

   <ul class="info_ul" *ngIf="!loginStatus" >
      <li><a  routerLink='/login' >login</a></li>
      <li><a routerLink='/singup' >signup</a></li>
  </ul>
  <ul class="info_ul" *ngIf="loginStatus">
    <div *ngIf="user | async"> //edit
     <li>{{( user | async).username }}</li> //username . string error
    </div>
    <li><a (click)="logout($event)">logout</a></li>
</ul>

console

user: {id: 7, uuid: '11a25078-be87-4a53-9ff7-ead8777f79be', username: 
'bb@test.kr', email: 'bb@test.kr', name: 'beom', …}
[[Prototype]]: Object

The error is gone but the username is interpolated and doesn't appear in the header Could you please take a look at this issue?

Solution

It's probably a problem with the types

try this adjustments to your code

First change User Class:

export class Useraccount {

   constructor(
        public id:string,
        public username: string,
        public name: string,
        public password: string,
        public email: string
   ){}
}

In AuthService :

private currentUser: BehaviorSubject<Useraccount> =
  new BehaviorSubject<Useraccount>(new Useraccount("", "", "", "", ""));

login(username:string,password:string){ 
      const params = new FormData();
      params.append('username', username);
      params.append('password', password);

      return this.http.post<any>(`${baseUrl}/signin/`, params, { observe:'body', withCredentials: true})
      .pipe(
         catchError(this.handleErrorsingup)
       );
}

logout(){
      return this.http.post<any>(`${baseUrl}/signout/`, {})
       .subscribe(response => {
          this.isLoggedIn.next(false);
          this.setCurrentUser(null);
          sessionStorage.clear();

          this.router.navigate(['login']) 
}

In auth.serice create two new functions :

setCurrentUser(user: Useraccount): void {
   this.currentUser.next(user);
}

getCurrentUser(): Observable<Useraccount> {
   return this.currentUser;
}

In the header do this :

export class HeaderComponent implements OnInit { 

  user: Useraccount = new Useraccount("", "", "", "", "");

  private userNameSubject: BehaviorSubject<string> = new BehaviorSubject<string>("");

  userName$: Observable<string> = this.userNameSubject.asObservable();

  loginStatus?: boolean;
  constructor(private authservice:AuthService) { }

 ngOnInit(): void {

   this.authservice.getCurrentUser().subscribe(res => {
      if (res === null) {
        
         // handler error

         console.log(this.user);
      } else {
        this.userNameSubject.next(res.username);

        this.user = new Useraccount(res.userId, res.username, ...);
      }
    })
   this.authservice.isLoggedIn.subscribe((status:any) => {
     this.loginStatus = status;
   });
 }

 logout($event: any){
   $event.stopPropagation();
   this.authservice.logout();
   this.user = new Useraccount("", "", "", "", "");
  }
}

<ul class="info_ul" *ngIf="!loginStatus" >
      <li><a  routerLink='/login' > 로그인</a></li>
      <li><a routerLink='/singup' >회원가입</a></li>
</ul>
<ul class="info_ul" *ngIf="loginStatus">
    <ng-container>
    <li>{{ userName$ | async }}</li>
    </ng-container>
    <li><a (click)="logout($event)">로그아웃</a></li>
</ul>

Answered By - Ali M