'Unexpected token c in JSON at position 0 in rxjs httpclient post

I have an API which produce String media type. When I call this API in my Angular frontend I obtain an error saying Angular waiting a json but obtain a String. I Try to fix it with the responseType option but my IDE displaying an error and my Angular page fall in error. How can I fix this error ?

@POST
@Produces(MediaType.TEXT_PLAIN)
@RolesAllowed({"User", "Admin"})
public CompletableFuture<String> post(@Valid MyJsonResource input) {
     return UUID.randomUUID().toString();
}

Angular Post

public createResource(myPayload: Payload): Observable<string>{
    return this.http.post<string>(this.API_URL,myPayload)
      .pipe(map((response)=>{
        console.log(JSON.stringify(response));
        return response;
      }));
  }

This one not comipile

 public createProcess(myPayload: Payload): Observable<ArrayBuffer>{
    return this.http.post<string>(this.API_URL,myPayload, {responseType: 'text'})
      .pipe(map((response)=>{
        console.log(JSON.stringify(response));
        return response;
      }));
  }

Error :

SyntaxError: Unexpected token c in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:41464:39) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:4780:31) at Object.onInvokeTask (http://localhost:4200/vendor.js:67916:33) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:4779:60) at Zone.runTask (http://localhost:4200/polyfills.js:4552:47) at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:4861:34) at invokeTask (http://localhost:4200/polyfills.js:5974:14) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:6011:21)
message: "Unexpected token c in JSON at position 0"
stack: "SyntaxError: Unexpected token c in JSON at position 0\n    at JSON.parse (<anonymous>)\n    at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:41464:39)\n    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:4780:31)\n    at Object.onInvokeTask (http://localhost:4200/vendor.js:67916:33)\n    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:4779:60)\n    at Zone.runTask (http://localhost:4200/polyfills.js:4552:47)\n    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:4861:34)\n    at invokeTask (http://localhost:4200/polyfills.js:5974:14)\n    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:6011:21)"
[[Prototype]]: Error
text: "ccd47374-e100-4638-8342-8a79244b306d"


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source