I have some Angular code using HttpClient, and I simply want to use the "post" method, with a particular payload and headers, with the "toPromise()" option. Yes, I realize toPromise() is deprecated, but I need to use it anyway.

In the class below, which does NOT actually run but is a representative sample of what my real project looks like, you'll observe a CURL console.log. When I copy the logged CURL and run it in my Mac terminal, it runs perfectly and yields a correct result from the server.

However, when I run the await this.http.post, I get an error like "Error response is not a String". I assume at this point that the issue is with how I am constructing the HttpClient object, since I know (because of the CURL) that the server API endpoint is fine.

  import { HttpClient, HttpHeaders } from '@angular/common/http';

  class CheckoutComponent {
    constructor(private http: HttpClient) {}

    async testCheckout() {
      const payload = {
        "amount": 12,
        "user_id": "12345",
        "token": "the_token"
      };
  
      const headers = {
        headers : new HttpHeaders({
          'Content-Type': 'application/json'
        }),
        responseType: 'text' as 'json'
      }
  
      const url = 'https://path/to/api/endpoint'
  
      const curlCommand = `curl -X POST -H "Content-Type: application/json" -d '${JSON.stringify(payload)}' ${url}`;
  
      // this command works when I run it in the terminal
      console.log(curlCommand);
  
      // THIS PRODUCES AN ERROR  
      // QUESTION: How do I mimic the above CURL Request using HttpClient?
      await this.http.post(url, payload, headers).toPromise();
    }
  }

I have some Angular code using HttpClient, and I simply want to use the "post" method, with a particular payload and headers, with the "toPromise()" option. Yes, I realize toPromise() is deprecated, but I need to use it anyway.

In the class below, which does NOT actually run but is a representative sample of what my real project looks like, you'll observe a CURL console.log. When I copy the logged CURL and run it in my Mac terminal, it runs perfectly and yields a correct result from the server.

However, when I run the await this.http.post, I get an error like "Error response is not a String". I assume at this point that the issue is with how I am constructing the HttpClient object, since I know (because of the CURL) that the server API endpoint is fine.

  import { HttpClient, HttpHeaders } from '@angular/common/http';

  class CheckoutComponent {
    constructor(private http: HttpClient) {}

    async testCheckout() {
      const payload = {
        "amount": 12,
        "user_id": "12345",
        "token": "the_token"
      };
  
      const headers = {
        headers : new HttpHeaders({
          'Content-Type': 'application/json'
        }),
        responseType: 'text' as 'json'
      }
  
      const url = 'https://path/to/api/endpoint'
  
      const curlCommand = `curl -X POST -H "Content-Type: application/json" -d '${JSON.stringify(payload)}' ${url}`;
  
      // this command works when I run it in the terminal
      console.log(curlCommand);
  
      // THIS PRODUCES AN ERROR  
      // QUESTION: How do I mimic the above CURL Request using HttpClient?
      await this.http.post(url, payload, headers).toPromise();
    }
  }

• angular
• curl
• angular-httpclient

• why was this down-voted? If there is something that I can do to make the question better, please let me know – Darren Gates Commented yesterday

1 Answer 1

This change to the headers object did the trick!

responseType: 'json' as 'json'