I am working with Angular 10 and got the problem that the completion behavior of my observable changes, depending on wether I use a pipe or not. Here are the two relevant parts of my code.
auth.service.ts
...
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
...
register(email: string, password: string): Observable<RegistrationResponse> {
return this.http.post<RegistrationResponse>(
`${environment.API_URL}/users/register`,
{ email, password }).pipe(tap<RegistrationResponse>({
next: (data) => {
console.log('success - tap');
if (data.jwt !== undefined) {
this.setSession(data.jwt);
}
},
error: () => {
console.log('error - tap');
}
})
);
}
...
auth.component.ts
...
this.authService.register(this.email, this.password).subscribe({
next: (_) => {
console.log('success');
this.router.navigate(['/']);
},
error: (error) => {
console.log('error');
this.error = error.error || 'Error';
this.loading = false;
}
});
...
When the requests fails and I get an error response, it causes the following output (as expected):
error - tap
error
But when the requests succeeds, I get this:
success - tap
error <--- unexpected
=> How does this make sense, what am I missing?
Additionally, when removing the tap pipe, the completion handler gets called as expected.
register(email: string, password: string): Observable<RegistrationResponse> {
return this.http.post<RegistrationResponse>(
`${environment.API_URL}/users/register`,
{ email, password })/*.pipe(tap<RegistrationResponse>({
next: (data) => {
console.log('success - tap');
if (data.jwt !== undefined) {
this.setSession(data.jwt);
}
},
error: () => {
console.log('error - tap');
}
})
);*/
}
Output:
success