WARNING in ./node_modules/pdfjs-dist/build/pdf.js

Question

i am using ng2-pdf-viewer by:

{PdfViewerModule} from 'ng2-pdf-viewer/ng2-pdf-viewer';

Since Angular 6 the ng build showing the following error but the app still working. What is the problem and how can i solve it?

WARNING in ./node_modules/pdfjs-dist/build/pdf.js Module not found: Error: Can't resolve 'zlib' in 'C:\MyProject\node_modules\pdfjs-dist\build'

Answer 1

This is not an actual solution but a temporary work around as editing files inside node_modules is always a bad approach. You can get rid of this warning by adding the below code in the file.

node_modules/pdfjsdist/package.json

Add zilb: false here

browser": {
    "fs": false,
    "http": false,
    "https": false,
    "node-ensure": false,
    "zlib": false
  },

This is still an open issue in Github for this npm

https://github.com/VadimDez/ng2-pdf-viewer/issues/322.

Answer 2

The problem

According to ng2-pdf-viewer's author, the module has a dependency (PDF.js) that is not ES (ECMAScript) compatible, but has CommonJS syntax instead. The problem is that CommonJS modules cannot be optimized and minified, since CommonJS is a standard not intended for use in web browsers (more info about CommonJS and ES here).

So, there is still no easy way to solve this warning, until PDF.js is updated to ES syntax.

Possible solution

In this ticket, the module's author pointed a PDF.js ES modulized build that can be used in the meantime, but you must install it and modify the dependency manually in your Angular package config files.

You can ignore the warning

There is a way to ignore (hide) the warning, but perhaps this is not advisable, because warnings are there to remind you of an issue that might turn into a problem in a near future. To ignore the warning, add the allowedCommonJsDependencies property to angular.json:

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        "allowedCommonJsDependencies": ["ng2-pdf-viewer"],
    }
}