Posted 24 February 2021, 7:03 am EST
I’m currently working on a PoC to integrate the GcPdfViewer into our application but when I run our application locally and log into it to see if I can get the viewer to display with a new, blank document, the viewer comes up but I get the following errors in the Chrome DevTools Console. The viewer does display the error as well but because of where it shows it, it’s truncated and I’m not able to see the entire error without looking in the browser console.
The pdf worker has been disabled. Note, rendering PDF in foreground thread can slow pdf viewer performance.
errors.ts:30 ERROR Error: Uncaught (in promise): Error: Setting up fake worker failed: “(SystemJS) Unexpected token ‘<’
SyntaxError: Unexpected token ‘<’
at eval ()
Evaluating http://localhost:59981/pdfjs/core/worker
Error loading http://localhost:59981/pdfjs/core/worker”.
Error: Setting up fake worker failed: “(SystemJS) Unexpected token ‘<’
SyntaxError: Unexpected token ‘<’
at eval ()
Evaluating http://localhost:59981/pdfjs/core/worker
Error loading http://localhost:59981/pdfjs/core/worker”.
at eval (gcpdfviewer.js:1)
at e.invoke (zone.min.js:13)
at Object.onInvoke (ng_zone.ts:308)
at e.invoke (zone.min.js:13)
at t.run (zone.min.js:13)
at zone.min.js:21
at e.invokeTask (zone.min.js:13)
at Object.onInvokeTask (ng_zone.ts:293)
at e.invokeTask (zone.min.js:13)
at t.runTask (zone.min.js:13)
at D (zone.min.js:21)
at D (zone.min.js:21)
at zone.min.js:21
at e.invokeTask (zone.min.js:13)
at Object.onInvokeTask (ng_zone.ts:293)
at e.invokeTask (zone.min.js:13)
at t.runTask (zone.min.js:13)
at _ (zone.min.js:13)
at t.invokeTask [as invoke] (zone.min.js:13)
at _ (zone.min.js:44)
However, when I follow the instructions to create just a base project to display a PDF, it works beautifully.
Within our application we use the systemjs.config.js to obtain the packages we need, which I added as ‘@grapecity/gcpdfviewer’: ‘npm:@grapecity/gcpdfviewer@2.0/gcpdfviewer.js’.
I set up a very generic TypeScript component:
import { Component, OnInit } from "@angular/core";
import { GcPdfViewer } from '@grapecity/gcpdfviewer';
@Component({
selector: 'bh-pdf-viewer',
templateUrl: 'app/shared/components/pdf-editor/pdf-editor.component.html'
})
export class PdfEditorComponent implements OnInit {
constructor() {
}
ngOnInit() {
let viewer = new GcPdfViewer("#host");
viewer.addDefaultPanels();
viewer.newDocument();
}
}
The associated HTML file just has the div tag with the id.
Any help to get this functioning with Angular and TypeScript would be greatly appreciated as I have so far been unable to find any examples on how to integrate this with Angular and TypeScript.
