Impossible to use res.name because of subscribe (ANGULAR)

Issue

Currently I am following a tutorial on Youtube in which it uses authentication with Angular and I can't continue at this point :

His code does not work on my side because of subscribe() which gives me the message:

@deprecated — Instead of passing separate callback arguments, use an observer argument. Signatures taking separate callback arguments will be removed in v8. Details: https://rxjs.dev/deprecations/subscribe-arguments

I'm forced to use next, error and complete and and despite everything, the res.name is not displayed.

ngOnInit(): void {
  this.http.get(
    'http://localhost:8080/api/user',
    {withCredentials: true}
    ).subscribe({
    complete: () => { (res: any) => this.visiteur = `${res.nom}`  },
    error: () => { (err: any) => console.log(err)  },
    next: () => { (res: any) => this.visiteur = `${res.nom}`  }
    });
}

Solution

The current way of subscribing is using more of rxjs operators, The tutorial you are following seems a little outdated. I recommend you follow angular's Tour of heroes tutorial instead. It is always up-to-date.

This should get you going:

this.http
    .get('http://localhost:8080/api/user')
    .pipe(
        catchError(err => {
            console.log(err);
        })
    )
    .subscribe(data => {
        this.visiteur = `${data.nom}`;
    });

Also I would recommend you implement an angular http interceptor to pass in http required attributes/headers (in your case withCredentials). But this is optional for the scope of this question.

And finally, don't forget to avoid the memory-leak trap with subscriptions.

Answered By - The Fabio