Angular project WebViewer integration issues

  • The WebViewer does not load properly and the HTML component is recursively re-rendered inside (see image below). How should I fix this?This error has likely occurred because WebViewer can't find it's library. Please make sure that you have done the following:
    • The library containing the webviewer.min.js file is not located inside the PROJ_PATH/src/app/ folder or any of its sub-folders
    • You have correctly added the path to webviewer.min.js to the scripts array under the build options array in angular.json
    • You have correctly added the path to the library in the assets array under the build options in angular.json

Apryse Docs Image
  • WebViewer having issues with progressive web application (PWA)

When using WebViewer as part of a PWA, make sure to include the path to WebViewer "lib" folder in your ngsw-config.json file. Also WebViewer needs to pass configuration information to it's workers. Make sure that you are not setting ignoreSearch to be true under cacheQueryOptions. So in your ngsw-config.json file

JSON

1"assetGroups": [
2 {
3 "name": "app",
4 "installMode": "prefetch",
5 "resources": {
6 "files": [
7 "/favicon.ico",
8 "/index.html",
9 "/manifest.webmanifest",
10 "/*.css",
11 "/*.js",
12 ]
13 },
14 "cacheQueryOptions": {
15 "ignoreSearch": true
16 }
17 },
18 {
19 "name": "webviewerResources",
20 "installMode": "prefetch",
21 "resources": {
22 "files": [
23 "/path to WebViewer lib folder/lib/**"
24 ]
25 },
26 "cacheQueryOptions": {
27 "ignoreSearch": false
28 }
29 },
30]

ignoreSearch default value is false so the ignoreSearch above is actually not needed. If a project requires ignoreSearch be to true for other resources, make sure to not set it to true for WebViewer's resources

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales