Angular - Argument of type 'OperatorFunction<Response, Response>' is not assignable to parameter of type 'OperatorFunction<Object, Response>'

user_11352561 0
Viewed 494

In my Angular-12 application, I have this code in the service:

 constructor(private http: HttpClient, private router: Router) {
   var currentUser = JSON.parse(localStorage.getItem('user')|| '{}');
  this.token = currentUser && currentUser.token;
}

  public getAllCountries(): Observable<any> {
    const httpOptions = {
      headers: new HttpHeaders({
        "Content-Type": 'application/json',
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Origin, Authorization, Content-Type, Accept",
        "Authorization" : "Bearer " + this.token
      })
    };

    return this.http.get(this.apiUrl  + '/fetchCountries', httpOptions )
        .pipe(
            map((response: Response) => {
                return response;
            })
        );
  }

This line is highlighted:

map((response: Response) => {

return response;

Then I got this error:

Argument of type 'OperatorFunction<Response, Response>' is not assignable to parameter of type 'OperatorFunction<Object, Response>'.
  The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
    Type 'Object' is missing the following properties from type 'Response': headers, ok, redirected, status, and 12 more.ts(2345)

How do I get it resolved?

Thanks

angular
1 Answers

You are using Response, which is also very deprecated, it was used back when we used Http, like pre angular version 4, if I remember correctly. HttpClient... it returns a generic object, like the error also says. Instead you should type your data to interfaces and tell the HttpClient what you are receiving. Assumingly you are getting an array, so something like this should work:

export interface Country {
  // whatever properties your response has
}

Then tell the HttpClient that what you expect as a response is an array of Country. Also you don't actually need the map here, as you are not modifying the data in any way... So this would suffice:

return this.http.get<Country[]>(this.apiUrl  + '/fetchCountries', httpOptions)

Please always refer to the official documentation to get the most up to date documentation: https://angular.io/guide/http

user_62940720
Related