What specific changes need to be made to the below in order for an Angular 2 / 4 app to successfully load a PDF file from a RESTful http call into the web browser?
Note that the app in question extends http to add a JWT to http requests. According to this link, extending http in this way will cause problems related to overriding RequestOptions.
THE SPECIFICS:
The intended PDF is successfully served by a backend API when users type http://192.168.1.5:4000/whitepaper.pdf into a web browser. However, the Angular app needs to absorb the white paper from the API programattically, and then serve the pdf in the browser with a url that is part of the Angular app.
The code for the Angular app is as follows:
my.service.ts
getAll() {
console.log('Inside getAll!');
return this.http.get('http://192.168.1.5:4000/whitepaper.pdf').map((response: Response) => response.blob())
.catch((err:Response) => {
console.log('Error block!');
return Observable.throw('error!');
});;
}
my.component.ts
getPDF() {
console.log('Hey there, Jackass!');
console.log(JSON.parse(localStorage.getItem('currentUser')).token);
let myblob = new Blob([this.pDFService.getAll()], { type: 'application/pdf' });
console.log(myblob.type);
console.log(myblob.size);
var fileURL = URL.createObjectURL(myblob);
window.open(fileURL); // if you want to open it in new tab
}
myblob.type prints out as application/pdf, and myblob.size prints out as 15.
The backend API is in Node.js/Express.
The Angular code sample is from this answer, but does not work in the present situation.
The Code for the custom-http.ts is at this link . The link mentions that problems will occur in the present circumstances when http is overridden as it is in the present app.
