SyntaxError: JSON.parse: unexpected character on line 1 : Angular 5 Http call(Angular JS was working fine)

Question

I have a Spring REST service which gives a byte array. Previously I was using angularjs 1. Using FileSaver, I was able to download the pdf which is sent from REST service on the the response of a HTTP POST call.

Now, I am migrating my changes to angular 5. This is my HTTP post call in service -

testPDF(abc: FormArray): Observable<HttpResponse<any>> {
    const options = {
        headers: new HttpHeaders({
            'Content-type': 'application/json',
             'response-type': 'blob'
       })
     }
     return this.http.post<HttpResponse<any>>('/myRestPath', abc, options);
}

On my component typescript file I have subscribed like this -

xyz() {
    this.myService.testPDF(this.abc.value).subscribe((file: any) => console.log('done'));
}

I have verified my REST service. It returns proper byte array. I have tried several other workarounds available on the internet. But nothing seems to be working. In browser console I could see the response, which looks to be a PDF in byte stream. In console I could see 3-4 MB size received, which make me believe that I have received the data but couldn't subscribe it. HTTP response code is also 200.

It looks like by default, the response is tried to be fetched as a JSON instead of BLOB. As my response doesn't start with '{', while parsing the data it couldn't parse the response. I am not asking anyone to write code for me. For downloading PDF file also, I can do it using FileSaver.

The key problem I am facing is why my application is not entering into the subscribe block and execute the console statement.

Sorry. My bad. Abc method is the testPDF one. I have updated the question. — pradipta gure
– pradipta gure, Commented Mar 21, 2018 at 4:34

GSSwain · Accepted Answer · 2018-03-21 08:47:21Z

2

Looks like you are setting the response type on the headers, but HttpClient expects it to be set on the responseType property of the options.

For HttpClient the following update would work

testPDF(abc: FormArray): Observable<HttpResponse<Blob>> {
    return this.http.post('/myRestPath', abc, {
        observe: 'response',
        responseType: 'blob' 
    });
}

A complete example which works for me with a GET, provided there is a PDF file with the name some.pdf under the assets directory.

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class MyNewService {

  constructor(private http: HttpClient) { }

  getSomePDF():  Observable<HttpResponse<Blob>>{
    return this.http.get('/assets/some.pdf',  {
      observe: 'response',
      responseType: 'blob' 
    });
  }
}

For older ones using @angular/http, you can use the ResponseContentType enum with an import { ResponseContentType } from '@angular/http';

 const options = {
     responseType: ResponseContentType.Blob 
 }

API docs here.

edited Mar 21, 2018 at 8:47

answered Mar 21, 2018 at 5:17

GSSwain

6,2032 gold badges23 silver badges28 bronze badges

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

7 Comments

pradipta gure Over a year ago

When I set response type like this, I am getting compilation error while setting options as a 3rd argument on http post. It's showing "Types of property 'responseType' are incompatible. Type 'string' is not assignable to type '"json'".

GSSwain Over a year ago

@pradiptagure updated answer to cover more versions of Angular.

pradipta gure Over a year ago

Having the same issue still. It's still giving same compilation error.

pradipta gure Over a year ago

I am using latest version of angular.

GSSwain Over a year ago

@pradiptagure can you check the latest update to the answer

|

Collectives™ on Stack Overflow

SyntaxError: JSON.parse: unexpected character on line 1 : Angular 5 Http call(Angular JS was working fine)

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related