Typescript http.get Error: No overload matches this call

Question

I am trying to get a text file from the server so I have done this:

const httpOptions = {
  headers: new HttpHeaders({
    'Accept': 'text/html',
    'Content-Type': 'text/plain; charset=utf-8'
  }),
  responseType: 'text'
};
this.http.get<any>(url, httpOptions).subscribe(response => {
  const blob = new Blob([response], { type: 'text/csv' });
  const url = window.URL.createObjectURL(blob);
  const anchor = document.createElement('a');
  anchor.download = 'user-permission-auditlog' + endDate.toUTCString() + '.csv';
  anchor.href = url;
  anchor.click();
});

And it works exactly the way I want it to. However the compiler cries out in pain:

error TS2769: No overload matches this call. Overload 1 of 15, '(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<...>', gave the following error. Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'. Property 'observe' is missing in type '{ headers: HttpHeaders; responseType: string; }' but required in type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'.

It lists 3 of the 15, all of them complaining that responseType should be 'json' but 'text' as a responseType is definitely one of the overloads:

get(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "text"; withCredentials?: boolean; }): Observable<string>

https://angular.io/api/common/http/HttpClient#get

What am I doing wrong here?

Nada Touil · Accepted Answer · 2020-06-07 12:26:16Z

16

You have to cast httpOptions to Object. I had the same problem and it worked perfectly for me.

 const httpOptions : Object = {
  headers: new HttpHeaders({
    'Accept': 'text/html',
    'Content-Type': 'text/plain; charset=utf-8'
  }),
  responseType: 'text'
};

answered Jun 7, 2020 at 12:26

Nada Touil

3474 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ievgen Over a year ago

This is the right solution for Angular 13

darthVader Over a year ago

casting works. Can anyone explain why I had to cast the options in order to make it work?

Felix · Accepted Answer · 2020-10-21 18:21:20Z

10

According GitHub it should be fixed with:

The version of get that accepts responseType:'text' is not generic, since you're already stating the response would be a string.

So instead of:

return this.http.get<string>(this.url, {responseType: 'text'});

Just use the non-generic one:

return this.http.get(this.url, {responseType: 'text'});

And see SO answer here.

answered Oct 21, 2020 at 18:21

Felix

4,6353 gold badges51 silver badges73 bronze badges

1 Comment

Manuel Domínguez Over a year ago

This should be the selected answer!

Katharine Osborne · Accepted Answer · 2020-03-17 22:10:03Z

7

Okay so the fix was to change the responseType to 'text' as 'json', then replace the return type of any to string (which is how it is determining which overload to use).

const httpOptions = {
  headers: new HttpHeaders({
    'Accept': 'text/html',
    'Content-Type': 'text/plain; charset=utf-8'
  }),
  responseType: 'text' as 'json'
};
this.http.get<string>(url, httpOptions).subscribe(response => {
  ...
});

answered Mar 17, 2020 at 22:10

Katharine Osborne

7,0718 gold badges39 silver badges63 bronze badges

Comments

Eswaramoorthy · Accepted Answer · 2022-06-22 04:30:09Z

1

Add type to httpOptions

Eg: const httpOptions:any = { headers: new HttpHeaders({ 'Content-Type': 'application/json', }), 'observe': 'response' };

Addtional tip: Adding 'observe': 'response' will observe the whole response which helps us to fetch response.status (i.e. status code)

edited Jun 22, 2022 at 4:30

answered Jun 22, 2022 at 4:29

Eswaramoorthy

113 bronze badges

Collectives™ on Stack Overflow

Typescript http.get Error: No overload matches this call

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related