Angular 11 Core not defined when implementing Custom UI

Technical Support WebViewer
, ,
#1

WebViewer Version:

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No, Happens in both Chrome and Brave
Is your issue related to a front-end framework? Yes
Is your issue related to annotations? No

Please give a brief summary of your issue:
Hello, my team is testing out PDFTron for an Angular project (NOT AngularJS) and we wanted to test out the custom UI abilities of this library.
i get the following error
ERROR TypeError: Cannot read properties of undefined (reading 'setWorkerPath')

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
After importing pdftron webviewer library. Create an angular component and writing the following code

private documentLoaded$: Subject<void>;

 constructor() {
    this.documentLoaded$ = new Subject<void>();
  }

  ngAfterViewInit(): void {

    Core.setWorkerPath('../lib/core');
    let documentViewer: Core.DocumentViewer;
    documentViewer = new Core.DocumentViewer();
    documentViewer.setScrollViewElement(document.getElementById('scrollView'));
    documentViewer.setViewerElement(document.getElementById('viewer'));
    documentViewer.setOptions({ enableAnnotations: false });
    documentViewer.loadDocument('/files/webview-demo-annotated.pdf');
    documentViewer.addEventListener('documentLoaded', () => {
      this.documentLoaded$.next();
    });
}

Github repo to test this out : GitHub - varelycode/webviewer-angular-sample: Testing out doing a custom UI using pdftron

For some reason Core is undefined even though i can see the javascript in the console im importing from webviewer-core.min.js

I followed these instructions with both of the following with NO success:

  1. PDFTron Systems Inc. | Documentation

  2. and the guide on core didnt work either

PDFTron lib is not working on Angular 13
How do i save a pdf to a server instead of as a blob
#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

Hi Viviana,

Thank you for contacting WebViewer Support.

Following this guide on our website I made some changes to your project and the error went away. The following is your app.component.ts modified code.

import { Component, ViewChild, OnInit, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core';
import { Subject } from 'rxjs';
import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {

  @ViewChild('viewer') viewer: ElementRef;
  wvInstance: WebViewerInstance;
  @Output() coreControlsEvent: EventEmitter<string> = new EventEmitter();

  private documentLoaded$: Subject<void>;

  constructor() {
    this.documentLoaded$ = new Subject<void>();
  }

  ngAfterViewInit(): void {
    WebViewer({
      path: '../lib',
      initialDoc: '../files/webviewer-demo-annotated.pdf'
    }, this.viewer.nativeElement).then(instance => {
      this.wvInstance = instance;

      instance.UI.setLayoutMode(instance.UI.LayoutMode.Single);

      const { documentViewer } = instance.Core;
      documentViewer.setScrollViewElement(document.getElementById('scrollView'));
      documentViewer.setOptions({ enableAnnotations: false });
      documentViewer.addEventListener('documentLoaded', () => {
        this.documentLoaded$.next();
      });
    
      instance.UI.openElements(['notesPanel']);
    });
  }

  ngOnInit() {
  }

  getDocumentLoadedObservable() {
    return this.documentLoaded$.asObservable();
  }
}

Please let me know if this works for you and if you have any questions don’t hesitate to contact me.

Best Regards,

Dandara Navarro
Web Software Developer
PDFTron Systems, Inc.

#4

This doesn’t answer my question. I can get this running through the WebViewer just fine too, but Im looking to use a custom UI without the viewer. However Im not sure how to get access to Core with a custom UI.

Please see this link for what I am trying to do: PDFTron Systems Inc. | Documentation

#5

Hi Viviana,

Sorry about the misunderstood. Could you please check if you are following the following configurations?

  • The library containing the webviewer-core.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-core.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

Please let me know if even following all these configs you are still unable to access the Core.

Best Regards,

Dandara Navarro
Web Software Developer
PDFTron Systems, Inc.

#6

Hi!
I was facing the same problem using Angular 13. No problems when using WebViewer but no chance to run without viewer. In my case I was referencing the wrong script in my scripts array under angular.json. In additon to webviewer-core.min.js you need pdf/PDFNet.js :

"scripts": [
     "@pdftron/webviewer/public/core/webviewer-core.min.js",
     "@pdftron/webviewer/public/core/pdf/PDFNet.js"
]

Then you can access Core like this:

(window as any).Core

Cheers!

1 Like