404 Not Found - Couldn't fetch resource file in Angular framework

Technical Support
, , , ,
1

Product: Apryse document viewer

Product Version: 10.6.0

Please give a brief summary of your issue: 404 Not Found - Couldn’t fetch resource file
(Think of this as an email subject)

Please describe your issue and provide steps to reproduce it:

I am able to successfully integrate the webviewer to local environment, but
I am getting “404 Not Found” error in the network tab with “Couldn’t fetch resource file” popup after deployment.

“project-url/wv-resources/lib/core/office/WebOfficeWorkerWasm.gz.js.mem”,
“project-url/wv-resources/lib/core/pdf/full/optimized/PDFNetCWasm.gz.js.mem”

These are some of the files that are getting this error. However, surprisingly some files are getting a 200 OK response like below:
“project-url/wv-resources/lib/core/office/WebOfficeWorkerWasm.js”

I was able to find the below discussion that seems to the same issue:

Thank you for your time and attention!

1 Like
2

Hello @anil.mathew ,

Thank you for contacting WebViewer support.

There does seem to be some similarities with the forum post you linked.

To investigate further, please provide the following:

  1. Are you using WebViewer Server?
  2. A code snippet of your WebViewer constructor, along with all options set
  3. If possible, a minimum runnable sample which can reproduce the issue.

As suggested in the post you referenced, please confirm your backend allows serving ‘res’, ‘mem’, ‘wasm’ files.

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

1 Like
3

Hello @jromanocarlsen ,

Thank you for your immediate reply, please find the answers below:

  1. Are you using WebViewer Server?
    Ans: No
  2. A code snippet of your WebViewer constructor, along with all options set:
    Ans:

WebViewer({
licenseKey: //key,
fullAPI: true,
path: viewerConfigOptions.path,
preloadWorker: ‘office’,
disabledElements: viewerConfigOptions.disabledElements,
},
this.viewerReff.nativeElement).then(instance => {
const UIEvents = instance.UI.Events;

      instance.UI.loadDocument(blobData, { filename: documentName });
      instance.UI.addEventListener(UIEvents.LOAD_ERROR, function (err) {
        this.toaster.showError('Failed to load document')
      });
    });
  1. As for the runnable sample, we are not able to see this issue in local environment. this issue is only occurring after deployment!

I will also check if the server is accepting the file types that you mentioned.
Thank you for your support!!

1 Like
4

Hello @anil.mathew ,

No worries, happy to help!

Assuming that viewerConfigOptions.path is set correctly, I don’t see concerns with your constructor that would be connected. I would double check that if you have not already.

This sort of error can occur when WebViewer is unable to find the lib folder, set by the path option.

If this is only occurring in production, are you hosting the lib folder on a separate domain? If so, you can follow this guide to make sure WebViewer can find it: Remote-lib | Apryse Documentation

Let me know if you have confirmed the server is accepting the file types.

Hope this helps!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

1 Like
5

Hello @jromanocarlsen ,

We are able to fix this issue by adding the file types in web.config file. We also updated the content security policy according to our needs, this was another reason the document was not loading!!

Thank you so much for your time and support!!

Regards,
Anil Mathew
Software Engineer

1 Like