Problem with emit after switchMap angular observable

Question

The problem is: when this.getPost())) return error eg 404 (it's function which return GET), then code this.loggedChange.emit(false) is not executed and I don't know why. After this situation I have wrong output of loggedChangedHandler. It's look like inside error, after swtichMap, this.loggedChange has not 'observes'. Before switchMap it has observes so I think that it can be clue, but I don't know why it works like this. If first function return error (this.authLogin - it also retur get), then this.loggedChange.emit works fine.

child component:

login(): void {
  this.authLogin(this.email, this.password)
    .pipe(
      tap(() => this.loggedChange.emit(true)),

      switchMap(() => this.getPost())
    )

    .subscribe(
      resp => {
        //some code here
      },
      error => {
        this.loggedChange.emit(false);
      }
    );
}

in parent component I have something like this:

<login-component (loggedChange)="loggedChangeHandler($event)"></login-component>

and in ts

loggedIn$ = new BehaviorSubject(false);

loggedChangedHandler(el: boolean): any {
  this.loggedIn$.next(el);
}

score 0 · Answer 1 · answered Mar 05 '19 at 14:47

I think you have this behavior because the error occurs within your this.getPost() call.

Since you don't have an error handler, the observable tries to proceed despite having raised an error.

You could try to add a catchError in your pipe like this:

this.authLogin(this.email, this.password)
    .pipe(
      tap(() => this.loggedChange.emit(true)),
      switchMap(() => this.getPost()),
      catchError(error => this.loggedChange.emit(false))
    )
    .subscribe(
      resp => {
        //some code here
      },
      error => {
        this.loggedChange.emit(false);
      }
    );

Problem with emit after switchMap angular observable

1 Answers1