Types of property 'responseType' are incompatible

Question

I am unable to make a POST request in Angular 5 that accepts text/plain as response. Angular is calling a method which expects JSON as response and hence throws an error when response comes while trying to parse the response.

I tried calling method with parameter {responseType: 'text'} but VS code is showing it as an error and I am also getting an error in the console when the application is compiled.

Below is the Angular 5 code for a POST request that expects a response as text/plain.

this.http
.post<string>(this.loginUrl, this.user, {responseType: 'text'}) // error in this line
.subscribe(
    (data) => this.success(data),
    (error) => this.failure(error)
);

While compilation the following error show in the console:

ERROR in src/app/login/login.component.ts(47,47): error TS2345: Argument of type '{ responseType: "text"; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
  Types of property 'responseType' are incompatible.
    Type '"text"' is not assignable to type '"json"'.

Answer 1

The version of post accepting responseType:'text' is not generic, since the result type is already clear (ie string)

this.http
.post(this.loginUrl, this.user, {responseType: 'text'}) // no generic parameter
.subscribe(
    (data) => this.success(data), // data is string
    (error) => this.failure(error)
);

Answer 2

Here is an approach if you don't want to remove <string> to keep your response strongly typed:

    const httpOptions = {
      headers: new HttpHeaders({
        'Accept': 'text/plain, */*',
        'Content-Type': 'application/json' // We send JSON
      }),
      responseType: 'text' as 'json'  // We accept plain text as response.
    };
    return this.http.post<string>(this.setBaseUrl, body, httpOptions);

Replace text with valid responseType according the data that you want to receive.

Answer 3

Just remove "string" from your request. Try this:

this.http.post(this.loginUrl, this.user, {responseType: 'text'}).subscribe(
    (data) => this.success(data),
    (error) => this.failure(error)
);

Answer 4

I just ran into this particular issue today myself. After searching for a little and figuring that the responseType option should exist, I managed to get it work as below:

let requestOptions: Object = { 
    headers: new HttpHeaders().set('Authorization', 'Basic ' + credentials),
    responseType: 'text'
}    

return this.httpClient.get<any>(
                this.environment.tokenHost + this.environment.authenticationURL,
                requestOptions
            )
            .subscribe(result => {
                // do stuff
            });

Setting the responseType like that makes it work, compared to configuring it in the 'request' itself.

Regards.

Answer 5

this.http.post(this.loginUrl,this.user,{headers:
new HttpHeaders({'content-type':'application/json'}), responseType:'text'})
.subscribe((r)=>{console.log(r)})

Edit

It is wierd but creating header object separately like below snippet

let headerOptions = {
 headers: new HttpHeaders(
     {'content-type':'application/json'}),
       responseType:'text'
 }
this.http.post(this.loginUrl,this.user, headerOptions)
 .subscribe((r)=>{console.log(r)})

would throw error in VS code, so the idea is to pass the entire object in inline post request like above would solve the compilation error.