Lazy Loading with Angular

Lazy Loading with Angular

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

• 

  hnahon

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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

• 

  hnahon

  • Post Options:
  • Link
    Copy

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

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  hnahon

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  smorosow

  • Post Options:
  • Link
    Copy

  Posted 3 June 2021, 7:30 pm EST

  Hi Manish, Did you get the files necessary to inspect this issue?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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