When Updating to HttpClient: Uncaught in Promise/Http Failure during parsing

Question

In my angular app I'm updating from Http to HttpClient, which doesn't seem to work when working with Promises.

It seems like you need to use a little 'work-around' when dealing with promises in the httpClient, I tried to do it like in this article: https://vitalflux.com/angular-promise-explained-code-example/ but to no avail.

I also tried to work with Observable instead (and subscribe in the component.ts), but this also did not work out.

service.ts (with old Http, works like a charm)

public viewPDF(profileId: string, profileVersion: Date): Promise<any> {
    const pdfVersion = _.split(_.replace(profileVersion.toISOString(), /:/g, '-'), '.')[0];

    return this.http
      .get(`${this.pdfApiView}/${profileId}/${pdfVersion}`)
      .toPromise()
      .then(response => response);
  }

service.ts (-- now with HttpClient)

  public viewPDF(profileId: string, profileVersion: Date): Promise<any> {
    const pdfVersion = _.split(_.replace(profileVersion.toISOString(), /:/g, '-'), '.')[0];

    return this.httpClient
      .get<any>(`${this.pdfApiView}/${profileId}/${pdfVersion}`)
      .toPromise()
      .then(response => response);
  }

component.ts

 this.pdfDocumentService.viewPDF(prof[0].id, prof[0].version).then(resp => {
      if (resp._body !== 'file not found') {
        this.pdfList.set(prof[0].id + prof[0].version, resp.url);
      }
 });

The new method lead to the following Error messages:

ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK","url":"http://localhost:4200/api/pdfFile/i1cib1pgvk000000/2019-04-02T12-47-57","ok":false,"name":"HttpErrorResponse","message":"Http failure during parsing for http://localhost:4200/api/pdfFile/i1cib1pgvk000000/2019-04-02T12-47-57","error":{"error":{},"text":"%PDF-1.3\n%��\n6 0 obj\n<<\n/Type /Page\n/Parent 1 0 R\n/MediaBox ...

If you are working with files, you may need `{ responseType: 'blob' }` ([info](https://angular.io/api/common/http/HttpRequest#responseType)) — miselking, Apr 02 '19 at 14:44
Possible duplicate of [Angular HttpClient "Http failure during parsing"](https://stackoverflow.com/questions/46408537/angular-httpclient-http-failure-during-parsing) — Kirk Larkin, Apr 09 '19 at 12:48

score 1 · Answer 1 · answered Apr 09 '19 at 12:42

1

Thank you, this is what worked:

return this.httpClient.get(`${this.pdfApiView}/${profileId}/${pdfVersion}`, {
      observe: 'response',
      responseType: 'blob',
    });

I also needed to omit the casting (post)

answered Apr 09 '19 at 12:42

Lukas

61
1
1
5

score 0 · Answer 2 · edited May 19 '20 at 14:41

0

You don't need to use .then() .toPromise(), just look at this example.

In your service.

getData(): Observable<any> {

    let body: any = {};

    const options = { responseType: 'blob' };

    const url = `your api url`;

    return this._http.post<any>( url, body, options );
}

and then consume

this._service.getData().subscribe(res => {
  console.log(res)
})

edited May 19 '20 at 14:41

Agustin Meriles

4,866
3
29
44

answered Apr 02 '19 at 14:53

George C.

6,574
12
55
80

When Updating to HttpClient: Uncaught in Promise/Http Failure during parsing

2 Answers2