Ng2-pdf-viewer: Angular 6 support

[TimMeissner]

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [x] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

When updating to angular 6 (and angular-cli 6.0) i get the following errors when starting up the application with ng serve:

WARNING in ./node_modules/pdfjs-dist/build/pdf.js
Module not found: Error: Can't resolve 'zlib' in '/Users/timmeissner/coyo/coyo-frontend/ngx/node_modules/pdfjs-dist/build'

ERROR in ../node_modules/reserved-words/lib/reserved-words.js
Module not found: Error: Can't resolve 'assert' in '/Users/timmeissner/coyo/coyo-frontend/node_modules/reserved-words/lib'
ℹ ｢wdm｣: Failed to compile.

[fengerzh]

You have to work harder man, we just released Angular 5 version days ago, now it comes Angular 6. 😜

[rsheptolut]

I'm just some guy off the internet, but.

The first one Can't resolve 'zlib' is just a warning in pdf.js (so it's not code the author of ng2-pdf-viewer has control over). This is just a new warning, the library still works the same. The guys at angular must have added more strict checks for require() statements to the compiler. In reality, this require() statement in pdf.js won't even be executed unless you do some obscure stuff with SVGs as briefly mentioned here.

The second one Can't resolve 'assert' in '/node_modules/reserved-words/lib is straight up irrelevant here. Some other library named reserved-words triggers this error, and this time it's not a warning and a real error, so that's what actually prevents you from building your app, not ng2-pdf-viewer.

That said, ng2-pdf-viewer in its current version still works for me even after upgrading to Angular 6.

[KensingtonTech]

I can confirm what @rsheptolut said. The warning is annoying but has nothing to do with this library, and it seems to work just as well with Angular 6.

[shariqshahzad]

did you guys manage any solution for this warning ?

[rsheptolut]

@shariqshahzad Mostly anger management for now. Trying to cope with it. The way to remove the warning is to first find out which part of the whoole Angular 6 update introduced it, and file an issue in the Angular repo, or maybe in a webpack repo, or maybe these guys will tell you that pdf.js guys must now somehow code this differently... I don't have enough know-how to get to the bottom of this to at least file the issue to the right place.

[warapitiya]

Greetings!! ok to start this is something to do with Webpack as I believe, since Webpack 4 is written from the ground up, now it parse the whole file before it extracts required code.

Since PDFjs code needed zlib only if we run it on server side. But the problem is PDFjs includes the browser needed logic and server needed logic in the same js file.

I would say to start we can file a request to modulerized the PDFjs logic to seperate files so that any library that uses it can import correct required file.

pdfjs.browser.js
pdfjs.browser.min.js
pdfjs.server.js
pdfjs.server.min.js

[shariqshahzad]

i have managed to get rid of this warning but the solution is not a proper one if someone needs to know i can share

[Shay12tg]

@shariqshahzad please do :) this warning is annoying!

[shariqshahzad]

I'm sorry that is not working :'(

[ColinT]

EDIT: If you don't need zlib functionality, please see @enyachoke 's solution using package.json below.

Hi everyone,

zlib is a library natively available in node, but not available in the browser. With Angular 6 removing node shims (angular-cli issues comment), the reference to zlib is now missing as well.

As @rsheptolut mentioned, most of you do not need zlib at all. You can create a mock zlib library in your node_modules to suppress the warning locally. Make a folder called zlib under your node_modules and add a package.json file with sample contents:

{
  "name": "zlib",
  "version": "1.0.0"
}

You must also include an empty index.js file for node resolution to resolve this folder as a package.

file structure:

+-- node_modules
    +-- zlib
        +-- package.json
        +-- index.js

If you actually require zlib functionality, you can shim this with browserify-zlib. First, install the library:
npm i --save browserify-zlib

Then we have to alias zlib to browserify-zlib. Currently Angular cli 6 does not support ng eject so we cannot modify the webpack configuration directly to create an alias. Instead, under tsconfig.app.json add the following fields:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "zlib": ["../node_modules/browserify-zlib/lib/index.js"]
    }
  }
}

For IDEs to recognize this alias, under tsconfig.json add the same configuration fields using the correct relative pathing, e.g.: (note ./ instead of ../)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "zlib": ["./node_modules/browserify-zlib/lib/index.js"]
    }
  }
}

and make sure that you extend this file from tsconfig.app.json:

{
  "extends": "../tsconfig.json"
}

file structure:

+-- node_modules
|   +-- browserify-zlib
|       +-- ...
+-- tsconfig.json
+-- src
    +-- tsconfig.app.json

Once we can modify the webpack config again we can add the alias there instead for a cleaner solution:

{
  "resolve": {
    "alias": {
      "zlib": "browserify-zlib"
    }
  }
}

Thanks to @fengerzh and @Shay12tg for pointing out corrections in this solution.

[fengerzh]

@ColinT I tried add zlib folder in node_modules and add package.json as you mentioned, but when run npm run start, it still show:

WARNING in ./node_modules/pdfjs-dist/build/pdf.js
Module not found: Error: Can't resolve 'zlib' in '/Users/zhangjing/Projects/qiban/oa-web/node_modules/pdfjs-dist/build'
ℹ ｢wdm｣: Compiled with warnings.

[Shay12tg]

Thanks @ColinT
Got it working by installing stream-browserify and browserify-zlib and adding
"paths": {
"stream": ["../node_modules/stream-browserify/index.js"],
"zlib": ["../node_modules/browserify-zlib/lib/index.js"]
}
to the compilerOptions on tsconfig.json

[ColinT]

@fengerzh sorry I missed a step. You are right, it will not work with just package.json. You must also include an empty index.js file. Node resolution will not work otherwise. Here is the new file structure to use:

+-- node_modules
    +-- zlib
        +-- package.json
        +-- index.js

I will update my previous post accordingly. Thanks!

@Shay12tg Awesome. I did not realize it was under compilerOptions. Clearly I did not look closely enough!

I will update my previous post accordingly. Thanks for the heads up!

[fengerzh]

@ColinT Thank you, after adding an empty index.js, I finally get rid of the ugly zlib warning.

[lordgreg]

Waiting for the proper issue. Creating blind node module is nothing else but a hack. This is something it has to be updated in the module itself. Its a stricter warning and can be fixed. 👍

[ericrovtar]

Seems like everyone is saying the warning won't stop the component from working, but I'm having issues as I test this for a new application.

<pdf-viewer [src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'" 
    [render-text]="true"
    style="display: block;"></pdf-viewer>

I've tried with the example PDF and one put in my Angular app's assets folder, but both just show spinners that never load a page.

Am I missing something?

EDIT: Looks like it was the config issue, actually. I was able to get things to render now. Thanks!

[enyachoke]

I used this in the package.json

"browser": {
    "fs": false,
    "path": false,
    "os": false,
    "stream": false,
    "zlib": false
  }

To ignore the libs

[selvavmokshagroup]

@enyachoke Thank you, its works now

[Ristaaf]

@enyachoke Which package.json is that?

I tried adding it to my package.json but still get the zlib warning!

Does it need to be in node_modules/ng2-pdf-viewer/package.json or in node_modules/pdfjsdist/package.json? In those cases it is no go for me, as I cannot touch any files in node_modules, that folder is not checked in to version handling, I would in that case have to automatically write to the files in a post-install script and that gets hairy really fast!

[lordgreg]

Had exactly the same issue. If this should update the package.json from the module itself its not a proper update.

[enyachoke]

@Ristaaf am using angular cli so I add that to my angular cli project package.json.

[Ristaaf]

@enyachoke Ok, I also use angular cli, but I still get the zlib warning when even when adding the browser field to my package.json, I read up on it a bit and it should definitely work as you describe, so I will have to check what the problem for me is...

[maxmumford]

@enyachoke can you paste your entire package.json here so we can try with the same dependency versions etc?

[j-nord]

@enyachoke
We have the same problem: Module not found: Error: Can't resolve 'zlib'
The browser entry does not work in the package.json. We use also angular-cli.

[j-nord]

@VadimDez
Is very nice when you write new tools. But it would be better if this existing tool is also maintained. Can we hope for a solution for this problem?

[fengerzh]

As this project is an open source project, that means everyone can fork a copy of the code and fix the issue before raising a PR.

[chiragsenjaliya]

@j-nord @Ristaaf did you reinstall package after that? And also please stop ng serve!

[ghost]

@chiragsenjaliya I added the browser entry to the package.json, made sure no instances of Node.exe were running, deleted package-lock.json, uninstalled and reinstalled ng2-pdf-viewer, and I still get the warning.

More details would be beneficial.

[Ristaaf]

@chiragsenjaliya I did this:
with nothing running (I don't even use ng serve, only ng build)

Using gitbash on Windows 10

1. Added the browser part to package.json
2. npm cache clean --force
3. rm -rf node_modules
4. rm -f package-lock.json
5. npm install
6. ng build

And I get the zlib warning

[chiragsenjaliya]

@Ristaaf @sharppc add this in your root folder package.json:
{
"name": "drive",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"browser": {
"zlib": false
},
.....
}
I hope it might help.
Thanks 😊

[oguimbal]

If it helps: you can easily propagate @ColinT solution to other devs in your team using a postinstall script:

in your package.json

{
  "scripts": {
    "postinstall": "node ./postinstall.js"
  }
}

Then write a postinstall.js file in your project root

//  Fake zlib  (see https://github.com/VadimDez/ng2-pdf-viewer/issues/322)
const fs = require('fs');
var zl = './node_modules/zlib';
if(!fs.existsSync(zl))
  fs.mkdirSync(zl);
fs.writeFileSync(zl+'/package.json', `{
  "name": "zlib",
  "version": "1.0.0"
}`);
fs.writeFileSync(zl+'/index.js', '');

"Works" like a charm. No more zlib.

[quirogamauricio]

@enyachoke thank you, your proposed solution worked like a charm for me.
I only added :
"browser": { "zlib": false } to my Angular project's package.json, stopped the running application and started it again with ng serve. I also tried building it with ng build and i didn't get that warning anymore.
I'm using npm 6.2.0 and Node 8.11.3 if that helps.

[chiragsenjaliya]

I am really glad it helps! Cheers!

On Thu, Jul 19, 2018, 7:44 PM Mauricio Quiroga [e-mail]
wrote:

@enyachoke https://github.com/enyachoke thank you, your proposed
solution worked like a charm for me.
I only added :
"browser": { "zlib": false } to my Angular project's package.json,
stopped the running application and started it again with ng serve. I
also tried building it with ng build and i didn't get that warning
anymore.
I'm using npm v 6.2.0 and Node v8.11.3 if that helps.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/VadimDez/ng2-pdf-viewer/issues/322#issuecomment-406290915,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AS8BQ2fc1unkttzgNXA5nyvzcUlTgnoWks5uIJQ4gaJpZM4TyTzE
.

[treveshan]

Added
"browser": {
"zlib": false
}
to the ng package.json worked for me .

NB: I'm using
Angular CLI: 6.0.8
Node: 8.11.2
Angular: 6.0.7

[harinikprabhu]

Some IDEs like Visual Studio deletes a fake package (like the proposed zlib hack here) and throws the same error again. It is better to do it in other ways mentioned here.

[andrewjsaid]

@Ristaaf @sharppc I had the same problem, then removed "baseUrl": "./", from src/tsconfig.app.json and the error disappeared for me. That setting seems to come with the ASP.NET Core angular template - have no idea what it does though.

Edit: this is in addition to the "browser": { "zlib": false } change described above

[TheZoker]

The "browser": { "zlib": false } does not solve anything for me :/
Only way is to mock the zlib folder

Any advise?

[Mysame]

Will be fixed on Mozilla's side of things in pdf.js version 2:
https://github.com/mozilla/pdf.js/pull/9924

[Ristaaf]

@andrewjsaid Interesting, however we have edited baseUrl ourselves and are dependent on our new value in parts of our build system, so that is unfortunately not an option, but thanks for clearing out why the package.json browser thing did not work in my case. For now I am going with the fake zlib package created with a post-install script.

[legalbrickstechnology-dcm]

This is irritating :( the browser in package.json suggestion also didnt work for me (using 7 beta5 currently)
However the post script workaround removes the warning

[joaoyuki]

@Ristaaf @sharppc add this in your root folder package.json:
{
"name": "drive",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"browser": {
"zlib": false
},
.....
}
I hope it might help.
Thanks 😊

Thanks man! It worked for me.

[kyg9823]

@joaoyuki
When I added "browser":{"zlib":false} to package.json, I got a warning message during a build as below.

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

Can I ignore this message?
ng2-pdf-viewer component is working well.

[LastCodeDE]

Again in "ng2-pdf-viewer": "5.2.0" not yet solved.

When will it be fixed?

[ColinT]

Fix is up for pdfjs-dist mozilla/pdf.js#9924

ng2-pdf-viewer needs to update its dependency version to: [email protected]

I issued a PR for this: #409

[GuitarHero1969]

Same error in Angular 7.0.3

[GuitarHero1969]

@Ristaaf @sharppc add this in your root folder package.json:
{
"name": "drive",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"browser": {
"zlib": false
},
.....
}
I hope it might help.
Thanks 😊

Thanks man! It worked for me.

(I don't know why they just don't fix this)

[VadimDez]

Released in 5.2.2