Pipe not correctly mapping and error handling Angular

Question

I have a method in a service which returns an Observable. When I subscribe to the observable when I call the method in my component everything works fine and i get my account properly:

this.service.getAccountDetails(username)
    .subscribe(account =>{
        this.podcasts.push(account);
    });

However when I tried to implement this using a pipe with a map and catchError it returns nothing.

this.service.getAccountDetails(username)
    .pipe(
        map(account => {
            this.podcasts.push(account);
        }),
        catchError((error: Error) => {
            //Do some error stuff
            return of(null);
        })
    );

The method in the service I call looks like this:

getAccountDetails(u:String): Observable<Object> { }

Obviously I must have some annoying syntax error, but for the love of God I can't find it. Please help!

You must subscribe(), otherwise the request is never sent, and the pipeline of operations is never executed. map() is supposed to transform an event into something else, not to trigger side-effects. — JB Nizet

Sajeetharan Sajeetharan · Accepted Answer · 2018-11-04T18:53:43

Change it to something like this, as JB Nizet mentioned in the comment, you must subscribe,

this.service.getAccountDetails(username)
.pipe(
  catchError(this.errorHandler)
)
.subscribe((username) => this.podcasts.push(username););

and

   errorHandler(error: Error): Observable<any> {
    console.error('ERROR HANDLER', error);
    return new EmptyObservable();
  }

Pipe not correctly mapping and error handling Angular

2 Answers