Ngx-extended-pdf-viewer: JHipster Documentation Issues

[JaceAD]

Describe the bug
Some steps listed for JHipster installation have some errors, and some files have incorrect paths inside require statements. I listed the specific issues I ran into and how I resolved them.
This is based on JHipster 6.4.1.

Version info

• Version of ngx-extended-pdf-viewer: 1.8.4
• Version of the JavaScript files pdf.js, pdf-worker.js and viewer.js: 2.3.200

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 79.0.3945.88

To Reproduce
Follow the instructions at https://pdfviewer.net/getting-started word for word using JHipster instructions.

List of Specific Issues and Solutions That Worked For Me:

1. The directions say to place the js files under src/main/webcontent/app. On the version of JHipster I am using, webcontent is not an existing folder. I have gotten it to work by placing them under src/main/webapp/app.
   Also, it is a bit ambiguous that these should be placed inside a set of directories named "node_modules/ngx-extended-pdf-viewer/assets" instead of the js files being placed directly into src/main/webapp/app. This is probably obvious for someone with more experience using Node.js though.

1. In viewer.js, the line which sets pdfjsLib to a require statement had issues with the specified path (currently line 3510). The path is './pdf-2.2.js'. I'm not sure how these paths were intended to be resolved, and it also seems odd that 2.2 would be specified when the version given by the npm install was 2.3. I resolved this issue by making these changes in the copied version of the viewer.js file 1) removing the version from the path so that the specified file is pdf.js and 2) setting it to look in the parent directory rather than current directory '../pdf.js'. The reason for the second change is that, following the directions for JHipster installation, the viewer.js was placed one folder deeper than pdf.js and pdf.worker.js (inside a directory called "web").

2. Similarly, there is an error in a path in the pdf.js file. The require statement setting fallbackWorkerSrc had a path './assets/assets/pdf.worker-es5.js' which was fixed by removing one of the 'assets' directories from the path.

3. The require statement for pdf.worker.js failed when using the wildcard as shown in the documentation ("pdf.worker*.js" fails). Removing the wildcard fixed the issue.

Additional Notes:
Some issues occurred as a result of copying the js files, which were likely caused by my IDE (VS Code). On issue was the path mentioned in the 2nd issue above had ".js.js" appended. This may or may not have also been what caused issue 3 above. For this reason, having to copy these files manually can be troublesome.

[stephanrauh]

Awesome analysis, and great help! Thanks!

I'll update the documentation ASAP. It's possible some things have changed since I've written the JHipster documentation, so probably it's a good idea I create a fresh JHipster project myself. I'm afraid that shifts the timeframe from "ASAP" to "during the next couple of weeks"... :)

[marlonramon]

Sorry i can't get this to work on jhipster. I get 404 when viewer shows to assets/pdf.js. I put the js files in:

• webapp/app/pdf.js
• webapp/app/pdf.worker.js
• webapp/app/web/viewer.js

I also try to put in:

• webapp/app/assets/pdf.js
• webapp/app/assets/pdf.worker.js
• webapp/app/assets/web/viewer.js

But not working.

Did i do something wrong?

[JaceAD]

The paths I used are

• webapp/app/node_modules/ngx-extended-pdf-viewer/assets/pdf.js
• webapp/app/node_modules/ngx-extended-pdf-viewer/assets/pdf.worker.js
• webapp/app/node_modules/ngx-extended-pdf-viewer/assets/web/viewer.js

I should note that while this was able to get it working for me, there are still some errors showing up in console when I run it:

• 404 for /pdf.worker.js
• 404 for /assets/locale/locale.properties, and a warning about the property for my region not being found
• And many, many warnings about properties being undefined.

Nonetheless, it is currently functional for my purposes after the changes I made.

[stephanrauh]

I've found some spare time to examine the topic. But first, let me shout out a loud "Thank you" to @JaceAD . Judging by their reaction, you've managed to help @marlonramon. Awesome!

[stephanrauh]

This evening, I've installed JHipster 6.6 (the current version) and got ngx-extended-pdf-viewer 2.0.0-alpha.0 up and running. For your convenience, I've created a repository on GitHub: https://github.com/stephanrauh/PDF-Hipster

As it turns out, the current version of JHipster makes it really easy to use my PDF viewer. The new "lazy loading" feature of ngx-extendeded-pdf-viewer helps, too. I've updated the documentation on the showcase: http://localhost:4200/getting-started

[stephanrauh]

@JaceAD Well, the 404s are bad. I've improved the way the pdf.worker.js file is loaded with version 2.0.0, so it's a bit difficult to document it here. The new version expects the file to be in the assets folder. I guess you have to play around with the settings until the file is available under the correct URL. Until ngx-extended-pdf-viewer 1.8.4, this should be the root folder, but (a) I'm not sure and (b) you can configure it in the DefaultOptions, as documented here: https://pdfviewer.net/troubleshooting (scroll down to the "fake worker" section).

The other 404s and the warnings are bad too, but they "only" affect the internationalization. Most likely, you've forgotten to copy the locale folder, or - even more likely - you've copied it to the wrong place.

As for the region: I've tried to add more flexibility to the PDF viewer, but maybe it still doesn't recognize your locale file even if it's there. If so, please open a new ticket. Thanks in advance!

[stephanrauh]

I hope the updated documentation helps. If it doesn't, don't hesitate to answer to this ticket, or - even better - to open a new ticket.

Enjoy!

Best regards,
Stephan