Angular Error TS2554: Received x arguments instead of the expected 0 on piped operators

Question

Angular Error TS2554: Received x arguments instead of the expected 0 on piped operators

I encountered an issue with

Error TS2554: Expected 0 arguments, but got 4

when dealing with the observable getHappyDays().

The getHappyDays() Observable returns either

Observable<HttpResponse<IHappyDays>>

or

Observable<HttpErrorResponse>

. I have provided a StackBlitz demo to illustrate 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

angular typescript

Answer 1

Answer №1

First of all, there is a missing semicolon after the pipe() function. The main issue lies in the union return type specified in the getHappyDays() method. To fix this, you need to change it to

Observable<HttpResponse<IHappyDays> | HttpErrorResponse>

(refer to: https://github.com/ReactiveX/rxjs/issues/3388).

When it comes to interface design, it is not recommended to return HttpErrorResponse as a value since it clearly indicates an error. The Angular HttpClient documentation offers guidelines on how to handle errors effectively: https://angular.io/guide/http

Answer 2

First of all, there is a missing semicolon after the pipe() function. The main issue lies in the union return type specified in the getHappyDays() method. To fix this, you need to change it to

Observable<HttpResponse<IHappyDays> | HttpErrorResponse>

(refer to: https://github.com/ReactiveX/rxjs/issues/3388).

When it comes to interface design, it is not recommended to return HttpErrorResponse as a value since it clearly indicates an error. The Angular HttpClient documentation offers guidelines on how to handle errors effectively: https://angular.io/guide/http

Angular Error TS2554: Received x arguments instead of the expected 0 on piped operators

Answer №1

Similar questions

Child component experiencing issues with Materialize Pagination and Sorting functionalities not functioning

Angular (15) Encountering difficulties in expanding a typed FormGroup

Angular mistakenly uses the incorrect router-outlet

"Encountering an unmet peer dependency error while trying to set up Angular2 through the package.json

How to set an attribute within ngFor in Angular 2

Angular - developing a custom web element to enhance the project

Is it best practice to encapsulate providers within an Angular module?

Challenges encountered while running the npm start command

Issues encountered when working with Angular Material 2

Exploring the navigation hooks of Angular version 4

The performance of ternary operators in Typescript-based Reactjs fell short of my expectations

Employ ion-grid for a layout reminiscent of Duolingo's design

Refactor the fat arrow function in Typescript to maintain the bare function signature verification

I recently updated all my projects to Angular 14, but when I tried to install a package using `npm i`, it still

What are the steps to integrate the aws-iot-device-sdk NPM module with Angular 11? I am encountering errors related to fs, path, and tls during the build process

The type '{ componentParent: this; }' does not share any properties with the type 'Partial<RegisterEnterpriseComponent>' in Angular

Updating the Nuxt3 editing page with useFetch and $fetch for fetching data, along with a typed storage object that prevents loading issues

What is the method to obtain the complete URL in Angular?

Setting up conditional select options in Angular

Improve your code by avoiding the use of multiple ngIf statements