Http failure during parsing for http://{url} - ngx-restangular

Question

I am using Angular 8. I am calling an backend whose response is a PDF file. I am using ngx-restangular version 5. While calling backend from postman, I got the expected response. But calling backend from angular is giving me the following error in console:

{
  headers: {...},
  status: 200,
  statusText: "OK",
  url: "...",
  ok: false,
  name: "HttpResponseError",
  message: "Http failure during parsing for http://{url}",
  error: {...},
  request: {...},
  data:{...}
}

I tried to add responseType: 'blob' in the header as suggested in some of solution. But that is also not working. Following is the code.

service class:

...
download(id: number): Observable<any> {
    return this.restAngular
              .one('/download/' + id)
              .customGET('', {}, {responseType: 'blob'});
}
...

component class:

printFile(id: number) {
    this._service.download(id).subscribe(
        res => {
            FileSaver.saveAs(res, 'form.pdf');
        }, err => {
            console.log(err);
        }
    );
  }

and the custom interceptor looks like this:

@Injectable({providedIn: 'root'})
export class CustomHttpInterceptor implements HttpInterceptor {

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const accessToken = localStorage.getItem('accessToken');
        if (accessToken) {
            request = request.clone({
                headers: new HttpHeaders({
                    'Content-Type': 'application/json',
                    'Authorization': accessToken,
                    'Accept': 'application/json'
                })
            });
            return next.handle(request);
        } else {
            request = request.clone({
                headers: new HttpHeaders({
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                })
            });
            return next.handle(request);
        }
    }
}

app.module.ts:

...
export function restangularConfigFactory(RestangularProvider) {
    RestangularProvider.setBaseUrl(environment.baseUrl);
    RestangularProvider.setDefaultHeaders({Authorization: sessionStorage.getItem('accessToken')});
}

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        EntityModule,
        RestangularModule.forRoot(restangularConfigFactory),
        ReactiveFormsModule,
        ...
    ],
    bootstrap: [AppComponent],
    providers: [{
        provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptor, multi: true
    }],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})
export class AppModule {
}

error looks like:

Answer 1

According to the documentation, you can only pass query string params and headers with customGET, so your blob response type is ignored. You can verify that as your screenshot shows that the error occurred while calling JSON.parse

You can use .withHttpConfig to pass custom config to the underlying httpClient

download(id: number): Observable<any> {
    return this.restAngular.one('/download/' + id)
    .withHttpConfig({responseType: 'blob'})
    .get();
}

Here is a stackblitz example

Answer 2

You try to parse a PDF as application/json. Set the mime-type for the response to application/pdf.