ngx-extended-pdf-viewer/assets/pdf.js does not exist

In my Angular app, I have installed via npm the ngx-extended-pdf-viewer so that I can display the content of pdf files.

As per instructions, I have included the following in my angular.json file:

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

However, when I build my app using ng build, I get this error message:

An unhandled exception occurred: Script file node_modules/ngx-extended-pdf-viewer/assets/pdf.js does not exist.

There seems to be only one post on the www that mentions this message, and I don’t really understand that…

How can I fix this error?

Answer

Nowadays, installing ngx-extended-pdf-viewer has become a lot simpler. You don’t need the scripts section. The pdf*.js files are loaded automatically. Your advantage: you benefit from lazy loading, and your PDF viewer is a lot faster.

Technical deep dive: Many users of my library had problems with caching. When I publish a new version, they’d still use the old version of pdf.js. To solve this problem, I’ve added the version number to the file names. That, in turn, causes your error message.

Not including the JavaScript files has two other advantages. First, the pdf*.js files are only loaded when needed. So your initial bundle is a lot smaller, and the application loads faster. Second, pdf.worker.js is executed in a worker thread. For large PDF files that’s a factor ten performance boost.