Display PDF file inside Angular component using ngx-extended-pdf-viewer

Question

I have a problem to display PDF file inside Angular Component.

component.html

<ngx-extended-pdf-viewer
    [src]="'./instruction.pdf'"
    backgroundColor="#ffffff"
    [height]="'90vh'"
    [useBrowserLocale]="true"
  ></ngx-extended-pdf-viewer>

I have pdf file in the same directory.

angular.json

"scripts": [
     "node_modules/ngx-extended-pdf-viewer/assets/pdf.js",
     "node_modules/ngx-extended-pdf-viewer/assets/viewer.js"
 ]

Error in the browser: GET http://localhost:4200/assets/pdf.worker.js 404 (Not Found) What am I doing wrong ? Note that Im a beginner with Angular.

Answer 1

I'm the developer of ngx-extended-pdf-viewer.

Short story: you have to add the pdf.worker.js file as an asset:

       "assets": [
          { "glob": "**/pdf.worker.js", "input": "node_modules/ngx-extended-pdf-viewer/assets", "output": "/assets/" },
          ...
          }]

Long story:

Until recently, I recommended adding all three files to the scripts section: pdf.js, pdf.worker.js, and viewer.js. A couple of week ago, I found out that while this solution works, it's far from being ideal. It's better not to include the service worker with the bundle. It has been design to be lazy-loaded. That's why I've moved the file from the scripts section to the assets section.

You're rewarded by superior performance. Loading the service worker lazily allows it to run in a separate thread. So the user benefits from non-blocking I/O and non-blocking rendering. That's a remarkable performance boost, especially with large documents above the 200 pages mark.

Answer 2

Add: { "glob": "**/*", "input": "node_modules/ngx-extended-pdf-viewer/assets/", "output": "/assets/" } To angular.json file in "assets" attribute.

Answer 3

I have also faced this issue. I used bleeding-edge version and my settings was like that:

assets: [
{
  "glob": "**/*",
  "input": "node_modules/ngx-extended-pdf-viewer/bleeding-edge/",
  "output": "/bleeding-edge/"
}
...
]

At first, It was working. But suddenly It did not. Then I have replaced it with this one and it works for now:

{
    "glob": "**/*",
    "input": "node_modules/ngx-extended-pdf-viewer/assets/",
    "output": "/assets/"
}