Angular Error TS2554:Expected 0 arguments, but got x on piped operators

Question

I have an Error TS2554: Expected 0 arguments, but got 4 in the pipe of the observable getHappyDays()

getHappyDays() Observable returns a Observable<HttpResponse<IHappyDays>> | Observable<HttpErrorResponse> , I've included a stackblitze to better showcase the problem

 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
    Observable<IHappyDays> | Observable<never> {

    return this.happyService.getHappyDays()
      .pipe(//=>error thrown here
        first(),
        mergeMap((res) => {
          return of(res.body)
        })
      )
  }

https://stackblitz.com/edit/angular-3iujhb // in happy-resolver.service

Answer 1

Frist, a semicolon is missing after the pipe(). The main problem is the union return type in getHappyDays(). It will work when you change it to Observable<HttpResponse<IHappyDays> | HttpErrorResponse> (see: https://github.com/ReactiveX/rxjs/issues/3388).

Note regarding interface design: I wouldn't return HttpErrorResponse as a value since this obliviously is an error. Angular HttpClient documentation provides some guidelines how to deal with errors: https://angular.io/guide/http