Ngx-extended-pdf-viewer: Getting window.webViewerLoad is not a function

[premzetwerk]

[stephanrauh]

Would you mind to add some detail?

[stephanrauh]

Closed because I can't see how to reproduce the bug. The PDF viewer works in my project, and AFAIK many other projects, too. So it can't be a general problem.

[Hasan-git]

same as here

[Hasan-git]

Stephan I need your help please I have the same issue

https://stackblitz.com/edit/angular-vsrmnd

[stephanrauh]

@Hasan-git Thanks for the Stackblitz demo! Maybe I can help you now.

But it may take a while. I'm moving to another town. That's a lot of work, so I barely manage to read my mails. Please keep pinging me. In two or three weeks I should be able to return to my open-source projects again.

[avarndell]

I have the same issue as Hasan-git.

[stephanrauh]

@avarndell Duly noted. The incident made it to the top of my priority list. Well, almost to the top, I'm still in the midst of moving, but it's a close second!

[Neorilas]

Same here.

And add another one in the same row.

Cannot read property 'open' of undefined

[JWess]

Same issue.

[stephanrauh]

Sorry for letting you guys down. Moving to another town is a lot of work! I plan to resume work on ngx-pdf-viewer soon.

[stephanrauh]

I've downloaded your project to my local IDE, and it shows a different error. That's a pity, because I'd like to reproduce and solve the original error.

However, what you can do is to add [delayFirstView]="250" (or a bigger number). The error message you've reported often indicated timing problems.

@premzetwerk @Hasan-git @avarndell @Findelias @JWess Can you test this and tell me if it solves the bug, please? Thanks in advance!

If it doesn't: please open the file node_modules/ngx-extended-pdf-viewer/assets/viewer.js, search for window.webViewerLoad (line 259 or so) and add a console.log("Initialized webViewerLoad"); statement. Does you application print this statement? If so, is it printed before or after the error message?

[Neorilas]

Hi

I had the delayFirstView but without [], I added it but dont work... I put the console.log but its not printed anywhere. So I'm in the same place. @stephanrauh

Thanks for all anyway!

[stephanrauh]

So I'm in the same place.

Well, not quite. Granted, your bug still exists. But this sort of tedious, boring work is the key to success. I have to admit I'm still puzzled. Even so, now I know that there's something preventing the viewer.js file from being loaded. Either that, or it's loaded too late. So now we can start examining why that's so.

[Neorilas]

Well dont worry. Im going to wrap your library and try to fix it too. Maybe together we can found the fix.

[stephanrauh]

There seems to be a problem with Stackblitz. It doesn't support loading extra files using the angular.json file. I've also failed to load the three JS files directly.

So the reproducer isn't really a reproducer. It just shows what happens with an unmodified angular.json.

(To be fair: Stackblitz is awesome. Expecting it to parse the angular.json configuration is expecting too much. It's just a pity that we can't reproduce the bug this way).

[stephanrauh]

@Findelias Is there any progress on your side?

[Neorilas]

@Findelias Is there any progress on your side?

No, sorry. But I was busy the last days.

[stephanrauh]

Same here. :( It's a bit tiresome to hunt down these strange bugs. Finding race conditions in minified code... there has to be a better way! Does anybody know how to compile Mozilla's PDF.js without minification?

[stephanrauh]

@Findelias Ping! :)

(In other words: I'd like to repeat my question if there's progress on your side?)

[3m0]

Had the same issue, turns out I had to add useBrowserLocale to the tag and configure delayFirstView to 1000. Everything loads fine then...

[asilvapino]

guys, i made a mistake putting this settings on the TEST section:

Open the file "angular.json" (or ".angular-cli.json" if you're using an older version of Angular) and add these three JavaScript files to the "scripts" section:

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

Add the translations to the assets by adding them to the "assets" section in the angular.json:

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

So, you make sure to put this settings on "architect": section.
Regards

[stephanrauh]

I suspect most of these issues have something to do with these settings. I'll create a showcase web page with demo projects and documentation - maybe that helps. However, it may take a while.

[oskarhelling]

I had the same problem as described above, and managed to solve it by moving the viewer scripts first in the scripts list in angular.json.

[stephanrauh]

@oskarhelling Now that's interesting. I still don't understand what's going on, but it sounds like a clue. Can you send me a reproducer? One that shows the error if the viewer scripts are put last, but doesn't if the viewer scripts are put first in the angular.json?

[oskarhelling]

@stephanrauh Unfortunately, I do not seem to be able to reproduce the issue anymore by changing the order back. It must have been a problem with cashed files or something. The only other thing I did was to delete my entire output directory at the same time that I was "desperately" tweaking the project to see if I can provoke any kind of "reaction". Then it just suddenly started working. Apologies for the false positive.

[asilvapino]

in yellow, where it should be...

[Jch71]

Moving the scripts first in the scripts list was the solution for me, thanks !

[stephanrauh]

@asilvapino I tried to reproduce your idea. However, moving the assets section below the scripts section doesn't make any difference. Tested with Angular 8.0.0.

[stephanrauh]

I've collected your hints at http://pdfviewer.net/troubleshooting. Thanks everybody for participating in this discussion! I believe your clues helped many developers to get <ngx-extended-pdf-viewer> up and running.

[raovikash]

in yellow, where it should be...

In directory _node_modules/ngx-extended-pdf-viewer/assets/_ check if the name of files are same with which you are referring them in scripts. In my case, I had to replace "node_modules/ngx-extended-pdf-viewer/assets/pdf-2.2.199.worker.js" with "node_modules/ngx-extended-pdf-viewer/assets/pdf.worker-2.2.199.js".

[stephanrauh]

Oops. I have to do that. Would you mind to copy your text to a new issue? This helps me to track of the open issues. This one is close, so I might forget it.

Thanks in advance,
Stephan

[raovikash]

No problem, please go ahead.

[StevenGarcia-CG]

Same issue here, with angular.json as in examples and delayfirstView="6000"

EDIT: New tip: after installing, restart project, changes to angular.json won't be picked up if not

[jiverson]

Fyi the current iteration of this issue is because of angular cli v8 https://github.com/angular/angular-cli/issues/14952. It will work if you use ng build instead of ng serve because the scripts tag do not have type="module" in the production build (as per the defect).

You can could also update to the latest version of the cli to fix it via npm install @angular/cli@next for the time being.

Edit: Sorry I linked the wrong issue. I updated it. And here is the fix per the PR https://github.com/angular/angular-cli/commit/67cd378138b3c40628ad87afcd967b2c98309462

[stephanrauh]

Hold my beer. Adding a web worker does that?

[Stromwerk]

I have the same issue, however my use case is a little bit more complicated, as I am using the pdf-viewer in an internal library. Everything was working fine, until I packaged the library and installed it in another project to test it. That's when this error came about. I tried the different ordering in the angular.json. I also have delayFirstView, but when I install my internal library to another project I get this error.

[stephanrauh]

@Stromwerk I think that's easy to debug. I suspect packaging your library removes the webViewerLoad function. Somewhere in your files should be something like this:

  function webViewerLoad() {
    let config = getViewerConfiguration();
    window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
    window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;
    const event = document.createEvent('CustomEvent');
    event.initCustomEvent('webviewerloaded', true, true, {});
    document.dispatchEvent(event);
    pdfjsWebApp.PDFViewerApplication.run(config);
  }

  window.webViewerLoad = webViewerLoad;

Find this code in your packaged library. By default it's the file viewer.js, lines 254ff. Add a breakpoint or a console.log statement. My best guess is that either the viewer.js is not loaded or its executed too late.

When you're debugging, use the ES2015 build and avoid minification. The compiler for Internet Explorer and the minifier scramble your code beyond recognition.

[Stromwerk]

Sorry I am not entirely clear on what I should be doing. I can't seem to find the files you mention.

In the library I am building I use ngx-extended-pdf-viewer as a dependency. And I went into the installed files of the pdf-viewer and added console.log around the code you mention, however I don't see anything in the console.

The whole error is

ERROR TypeError: window.webViewerLoad is not a function
    at ngx-extended-pdf-viewer.js:682
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498)
    at ZoneTask.invoke (zone.js:487)
    at timer (zone.js:2281)

[stephanrauh]

@Stromwerk
Hi Kalin,

if you've been able to add the console.log statement, you've probably found the files I'm referring to. :)

Without seeing your source code, I can only guess. When I've started publishing my library on npm, I learned that Angular libraries simply ignore the resource files. That's why I've added a copy statement to the npm package:

  "scripts": {
    "start": "ng serve",
    ...
    "unix-package": "ng b ngx-extended-pdf-viewer && rm -r dist && ng-packagr -p projects/ngx-extended-pdf-viewer/ng-package.json && cp -R projects/ngx-extended-pdf-viewer/src/assets dist/ngx-extended-pdf-viewer/assets",

Without the cp statement, the files pdf.js, pdf-worker.js, and viewer.js aren't published with the library. They never make it to the node_modules/ngx-extended-pdf-viewer folder.

The second thing I learned that there's no standard way to include the assets of the library. That's why I instruct everybody to include the files in the scripts section of the angular.json file.

I suspect you've run into the same trap. For some reason, the three JavaScript files aren't part of your library. More precisely, the project using your library doesn't see them.

Most likely you need to copy the JavaScript files manually to the dist folder, and you have to include them in the angular.json of the consumer project.

I hope that makes things a bit clearer. If not, I need to see at least some detail about your project to help you.

Best regards,
Stephan

[gs-sdurbha]

I have the same issue. I tried moving scripts up to before assets in angular.json. Doesn't seem to work.
i used it like this.

<ngx-extended-pdf-viewer 
  [src]="'assets/sample.pdf'" 
  useBrowserLocale="true" 
  height="80vh" 
  delayFirstView="1000">
</ngx-extended-pdf-viewer>

Please help

[stephanrauh]

@gs-sdurbha At first glance, your code look good, so I have no idea what's going wrong. Check your JavaScript console. Are there any error messages? The error message window.webViewerLoad is not a function means that the JavaScript library hasn't been imported sucessfully. It can also mean you're loading things in the wrong order.