How to return a string with Angular's http client?

Question

I try to call a server which returns a csv as text. When I use Angular's HttpClient I want it to avoid trying to cast it to JSON. Setting the responseType to text in the httpOptions work, but it raises a TypeScript error which I ignore via @ts-ignore.

This is my code:

const httpOptions = {
  headers: new HttpHeaders({
    Accept: "text/plain",
    "Content-Type": "application/json",
  }),
  responseType: "text",
};

return this.httpClient.post<string>(
  `/api/csv`,
  {
    id: "1111",
    // more data
  },

  httpOptions
);

The error message is to big for me to see what the exact issue is. I got this solution somewhere here on SO, but I guess it is not up-to-date. But I am unable to see what the issue here is.

This is the error:

 Overload 1 of 15, '(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpContext | undefined; params?: HttpParams | ... 1 more ... | unde
fined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }): 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[]; } | undefined; observe: "events"; context?: HttpContext
| undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
      Property 'observe' is missing in type '{ headers: HttpHeaders; responseType: string; }' but required in type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpCon
text | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
  Overload 2 of 15, '(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "response"; context?: HttpContext | undefined; params?: HttpParams | ... 1 more ... | un
defined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }): 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[]; } | undefined; observe: "response"; context?: HttpContex
t | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
      Property 'observe' is missing in type '{ headers: HttpHeaders; responseType: string; }' but required in type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "response"; context?: HttpC
ontext | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
  Overload 3 of 15, '(url: string, body: any, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; context?: HttpContext | undefined; observe?: "body" | undefined; params?: HttpParams | ... 1 mor
e ... | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; } | undefined): 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[]; } | undefined; context?: HttpContext | undefined; observ
e?: "body" | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
      Types of property 'responseType' are incompatible.
        Type 'string' is not assignable to type '"json" | undefined'.

What am I missing?

Where are the other 12 overloads? You have to choose one of the overloads and the call the method with the corresponding arguments. — jabaa
– jabaa, Commented Mar 4, 2022 at 10:59
Any particular reason you don't want to use JSON? If you're actually getting a JSON response, you should use it and eventually stringify it if you want to use it as a string. — Misha Mashina
– Misha Mashina, Commented Mar 4, 2022 at 11:01
@MishaMashina The server returns CSV, not JSON. AFAIK Angular HttpClient can't parse CSV. — jabaa
– jabaa, Commented Mar 4, 2022 at 11:02
@jabaa This is the message I get in the terminal. But now I know why. I cannot use the generic version of post. Instead I have to use http.get("/api/csv", {responseType: "text"). Thanks for your anwer. — Apollo
– Apollo, Commented Mar 4, 2022 at 12:27

Apollo · Accepted Answer · 2022-08-22 09:52:26Z

7

Okay, I now found an answer.

Instead of this.httpClient.post<string>("/api/csv", {responseType: "text"}) I have to use this.httpClient.post("/api/csv", {responseType: "text"}). So without <string>.

edited Aug 22, 2022 at 9:52

answered Mar 4, 2022 at 12:28

Apollo

1,8783 gold badges21 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

How to return a string with Angular's http client?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related