Angular 6 support

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.

16 thoughts on “Angular 6 support

  1. 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.

  2. 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
    
  3. 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:

    project-root
    +-- 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:

    project-root
    +-- 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.

  4. 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

  5. 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. 👍

  6. I used this in the package.json

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

    To ignore the libs

  7. @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!

  8. @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 😊

  9. 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.

  10. @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.