Lazy Loading with Angular

Posted by: hnahon on 1 June 2021, 7:10 am EST

  • Posted 1 June 2021, 7:10 am EST

    Hi there,

    We encountered an issue with gcpdfviewer that can only be reproduced when the JS file (gcpdfviewer.js) is lazily loaded into our Angular app. The errors occurs when trying to use "viewer.saveChanges()" which throws "
    ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'show' of undefined
    "

    When the JS file is loaded immediately in the html (via <script src=...) the issue does not appear but if we load it several seconds after the app loads then we consistently see the above error.

    I'm working on preparing a shareable app which clearly demonstrates reproducing this issue but in the meantime I'd appreciate any suggestions or thoughts on how this can be resolved.

    Thanks,

    Shlomo
  • Replied 1 June 2021, 9:52 am EST

    I was able to track down the source of the issue. This is not Angular-specific. If you try this in a simple html page you'll get the same issue. See the attached sample (just change the support api url on line 16).

    I was able to track down the issue to the fact that your code depends on the document event of 'DOMContentLoaded' to do some initialization. Nowadays lazy-loading is a very common pattern in large JS apps and therefore this event should not be relied upon.

    Perhaps you can also add an `init()` method so that any initialization can be triggered by the user if necessary (like when lazy-loading).

    In the below sample. If you click the "save" button on the top of the page you'll see an error in the console. If you subsequently click "Simulate load" and then click "save" again you'll notice the error does not reappear.
  • Replied 1 June 2021, 3:48 pm EST

    Hi,
    We are sorry but we are unable to find the attached sample for the investigation. We would like to know if you are using the Angular application or PureJS. We agree that Lazy loading is widely used now a days.
    Please share the demo sample with us depicting your issue so that we may investigate at our end.

    Regards,
    Manish Gupta
  • Replied 1 June 2021, 10:02 pm EST

    Hi Manish.

    Seems like the attachment feature here doesn't work for me.

    Here's a link to the demo:

    https://www.dropbox.com/s/u05g0dxa9pdcp4x/gpceditor-lazy-loading-demo.7z?dl=0
  • Replied 3 June 2021, 7:30 pm EST

    Hi Manish, Did you get the files necessary to inspect this issue?
  • Replied 7 June 2021, 5:41 pm EST

    Hi,
    We are able to replicate the issue and we have forwarded this issue to the concerned team with the internal tracking id DOC-3283.
    We will let you know as we get an update on this.

    In the meantime, please call simulateInitialLoad() method after loading the sripts and the error should not occur.

    Regards,
    Manish Gupta
  • Marked as Answer

    Replied 10 July 2021, 12:54 am EST

    Hi,
    We are sorry for the inconvenience for the delayed response on this.

    This issue has been fixed in the latest build 2.1.18. Please refer to the attached updated project for your reference. LazyLoad_PdfViewer.zip

    For this, we need to do the following changes:
    1. Load the latest version 2.1.18
    2. Set the workerSrc for gcpdfviewer.worker.js file
    3. Set the async to true in case the issue occurs

    Code Snippet:
    viewerOptions = {
    ...
    workerSrc: workerUrl,
    ...
    };
    function loadScript(url) {
    script = document.createElement("script");
    script.async = true;
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
    return new Promise((resolve) => (script.onload = resolve));
    }



    Regards,
    Manish Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels