Ngx-extended-pdf-viewer: Cannot read property 'appendChild' of undefined

[ekselys]

Error

TypeError: Cannot read property 'appendChild' of undefined
    at ngx-extended-pdf-viewer.js:687
    at Array.forEach (<anonymous>)
    at PdfDummyComponentsComponent.addMissingStandardWidgets (ngx-extended-pdf-viewer.js:677)
    at ngx-extended-pdf-viewer.js:2029
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41645)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at invokeTask (zone-evergreen.js:480)
    at ZoneTask.invoke (zone-evergreen.js:469)

Describe the bug
After some debug,it looks like it cannot find this element:

  public addMissingStandardWidgets(): void {
   // this is undefined, and cause the error when appendChild is called
    this.dummyComponentsContainer = document.getElementsByClassName('dummy-pdf-viewer-components')[0];

    const container = this.dummyComponentsContainer as HTMLElement;
    if (container) {
      for (let i = 0; i < container.children.length; i++) {
        const child = container.firstChild;
        if (child) {
          container.removeChild(child);
        }
      }
    }

I think it's trying to find this element before it's rendered in the HTML.

Version info

• ngx-extended-pdf-viewer - 6.1.0
• ng-zorro-antd - 9.3.0
• angular 9.1.12

To Reproduce
I've tryed to reproduce it via stackblitz, but i've some problem with pdf.min.js script execution (see https://angular-4r21ac.stackblitz.io).
The main problem seems related to the component usage into a modal (if u try tu put it outside the modal it will run without problem).

*Workaround are also accepted*

Thanks, and great job!

[stephanrauh]

I'm afraid ngx-extended-pdf-viewer doesn't work on Stackblitz for some reason unknown. As a workaround, I've created the Github repository https://github.com/stephanrauh/ngx-extended-pdf-viewer-issues. The idea is you can fork it, copy the template project within the repository, implement your reproducer, and send it to me as a pull request.

I'd also accept your source code at Stackblitz, but I'm afraid I can't see them. All I can see is the application that doesn't work because of the pdf.min.js problem.

[stephanrauh]

As for the bug: I'm surprised you've run into it. No idea why "dummy-pdf-viewer-components" is not part of your DOM. I'm positive your reproducer is going to shed light on the miracle!

[stephanrauh]

Found it. It's a common bug with modals. Add a second "isPdfVisible" guard to the <ngx-extended-pdf-viewer> component. The PDF viewer can only initialize properly if it's visible. Maybe you need to wrap it into a timeout like so:

showModal(): void {
    this.isVisible = true;
   setTimeout(() => this.isPdfVisible = true);
  }

<ngx-extended-pdf-viewer *ngIf="isPdfVisible" ....

[ekselys]

Sorry for late respone, didn't received email notifications.
By the way, the workaround is the same i found to resolve the issue.

Thanks for support :)

[stephanrauh]

It's good to know you've managed to solve the issue!