PDF not render in existing Angular 7.3.9 project with PDFTron Angular Webviewer 8.7.0

Technical Support WebViewer
, , , ,
1

WebViewer Version: “@pdftron/webviewer”: 8.7.0

Do you have an issue with a specific file(s)?
All PDFs (local, from HTTP(S) site) and PDF blobs that I have tried failed to render when PDFTron Webviewer 8.3.0 was merged into an existing Angular 7 project.

Can you reproduce using one of our samples or online demos?
Issue only occurs when I adapt GitHub - PDFTron/webviewer-angular-sample: Sample to demonstrate integrating WebViewer into Angular for Angular 7.3.9 (which seems to work correctly) and then merge code from this modified demo into an existing Angular 7 project.

My issue is similar to the following:
//community.pdftron.com/t/pdftron-is-breaking-after-manual-deployment-to-the-iis-server/6202

So I verified that I had the following in the constructor:
backendType: ‘ems’

Are you using the WebViewer server? No

Does the issue only happen on certain browsers? No, Chrome, Edge and Firefox all exhibited the issue

Is your issue related to a front-end framework? Yes, Angular 7

Is your issue related to annotations? No

Please give a brief summary of your issue:
PDF not render in existing Angular 7.3.9 project with PDFTron Angular Webviewer 8.7.0

Please describe your issue and provide steps to reproduce it:
(1) Download the example Angular project from //github.com/PDFTron/webviewer-angular-sample and verify that it runs correctly. (it does)

(2) Adapt example from step (1) to use Angular 7.3.9.
My existing development environment settings:
C:\Projects\training>node -v
v10.16.0

C:\Projects\training>npm -version
6.9.0

C:\Projects\training>ng v

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/

Angular CLI: 7.3.9
Node: 10.16.0
OS: win32 x64
Angular:
…

Package Version

@angular-devkit/architect 0.13.9
@angular-devkit/core 7.3.9
@angular-devkit/schematics 7.3.9
@angular/cli 7.3.9
@angular/core 7.2.16
@schematics/angular 7.3.9
@schematics/update 0.13.9
rxjs 6.6.7
typescript 3.2.4

a) ng new C:\Projects\training\ang739PDFtron830A
b) cd ang739PDFtron830A
c) npm install @pdftron/webviewer
d) ng serve
This updated demo works correctly

(3) Merge PDFTron Webviewer 8.3.0 sample from step (2) into an existing Angular 7 project
The PDF does not render correctly and I cannot use the PDFTron Webviewer toolbar.
I tried HTTP(S), local linearized PDFs and PDF Blobs, but none rendered correctly.

Please provide a link to a minimal sample where the issue is reproducible:
N/A - Issue only occurs when I migrate a modified Angular 7 demo into an existing proprietary Angular 7 project

image
image1366×1024 51.9 KB

Browser console output:
boot.browser.ts:12 Angular development mode
core.es5.js:169 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: Angular Material UI component library
MatCommonModule._checkThemeIsPresent @ core.es5.js:169
app.component.ts:15 ngAfterViewInit()
vendor.js?v=QJmF_yDcQ6wcjY1tLzTtCMqL-SzwgJpSCPj7SM0qdV8:632 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
client.js:92 [HMR] connected
client.js:188 [HMR] bundle has 4 warnings
client.js:189 configurationThe ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.You can also set it to ‘none’ to disable any default behavior. Learn more: //webpack.js.org/configuration/mode/asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.Assets: main-client.js (x MiB) 0.f3cc618d274e0924f446.hot-update.js (x MiB)entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.Entrypoints: main-client (x MiB) main-client.js 0.f3cc618d274e0924f446.hot-update.jswebpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.For more info visit Code Splitting | webpack
closeDocument.js:44 Object

(index) Value
UI version ‘8.7.0’
Core version ‘8.7.0’
webviewer.min.js ‘8.7.0’
Build ‘Ny8xNS8yMDIyfGI1YjhkN2E4Yw==’
WebViewer Server false
Full API false

  1. Object

  2. Build: “Ny8xNS8yMDIyfGI1YjhkN2E4Yw==”

  3. Core version: “8.7.0”

  4. Full API: false

  5. UI version: “8.7.0”

  6. WebViewer Server: false

  7. webviewer.min.js: “8.7.0”

webviewer-core.min.js:215 Your server has not been configured to serve WebAssembly threads. See PDFTron Systems Inc. | Documentation for instructions on how to resolve this.
y @ webviewer-core.min.js:215
setCustomNoteFilter.js:98 ‘setCustomModal’ deprecated since version 8.5. Please use UI.addCustomModal instead
c5 @ setCustomNoteFilter.js:98
assets/lib/ui/index.html#d=%22https%3A%2F%2Fpdftron.s3.amazonaws.com%2Fdownloads%2Fpl%2Fwebviewer-demo.pdf%22&a=1&filepicker=0&pdfnet=0&enableRedaction=0&disableVirtualDisplayMode=0&enableMeasurement=0&pageHistory=1&notesInLeftPanel=0&singleServerMode=false&selectAnnotationOnCreation=0&autoFocusNoteOnAnnotationSelection=1&id=1&basePath=%2Flogin&webViewerJSVersion=8.7.0:1 [DOM] Password forms should have (optionally hidden) name fields for accessibility: (More info: //goo.gl/9p2vKq) ​…​​
app.component.ts:22 test 1
app.component.ts:23 8.7.0
app.component.ts:41 test 2
vendor.js?v=QJmF_yDcQ6wcjY1tLzTtCMqL-SzwgJpSCPj7SM0qdV8:2224 [Violation] ‘message’ handler took 2657ms
webviewer-core.min.js:2778 [Violation] Avoid using document.write(). //developers.google.com/web/updates/2016/08/removing-document-write
Da @ webviewer-core.min.js:2778
La.f7 @ webviewer-core.min.js:2819
pa @ webviewer-core.min.js:264
(anonymous) @ webviewer-core.min.js:744
e @ webviewer-core.min.js:213
(anonymous) @ webviewer-core.min.js:211
n @ webviewer-core.min.js:211
webviewer-core.min.js:2778 [Violation] Avoid using document.write(). Intervening against document.write() - Chrome Developers
Da @ webviewer-core.min.js:2778
La.f7 @ webviewer-core.min.js:2819
pa @ webviewer-core.min.js:264
(anonymous) @ webviewer-core.min.js:744
e @ webviewer-core.min.js:213
(anonymous) @ webviewer-core.min.js:211
n @ webviewer-core.min.js:211
webviewer-core.min.js:2778 [Violation] Avoid using document.write(). //developers.google.com/web/updates/2016/08/removing-document-write
Da @ webviewer-core.min.js:2778
La.f7 @ webviewer-core.min.js:2819
pa @ webviewer-core.min.js:264
(anonymous) @ webviewer-core.min.js:744
e @ webviewer-core.min.js:213
(anonymous) @ webviewer-core.min.js:211
n @ webviewer-core.min.js:211
PDFworker.js:67 undefined
t @ PDFworker.js:67
F @ PDFworker.js:81
b @ PDFworker.js:81
f @ PDFworker.js:95
r @ PDFworker.js:240
g.onmessage @ PDFworker.js:253

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

Hello Jeff,

According to the information you provided, since you’re using backendType: ‘ems’, there shouldn’t be any issue related to the thread workers. However, the PDF workers return undefined in the dev console in the screenshot. It’s possible that the server where WebViewer is hosted might serve the document/WebViewer files incorrectly with status 200, so that the document is not being rendered. Could you check if the server is serving the files in the WebViewer lib folder correctly?

In order to investigate further into this issue, would you be able to provide us the code sample so that we can reproduce the issue on our end?

4

Thank you for the feedback. I will look more into verifying the server hosting of the files.

I will look into stripping out proprietary info and creating a minimal complete project to demonstrate the issue.