View PDF using ng2-pdf-viewer

Ionic Framework ionic-v3
1

I am trying to view a pdf using ng2-pdf-viewer. My code:

Sample Text

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { PdfViewerComponent } from ‘ng2-pdf-viewer’;

@Component({
selector: ‘page-test4’,
templateUrl: ‘test4.html’,
providers: [PdfViewerComponent]
})

export class Test4Page {
public pdf;
constructor(public navCtrl: NavController,
public pdfViewerComponent: PdfViewerComponent
) {
this.pdf = “https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf”;
}

ionViewDidLoad() {
console.log(‘Hello ViewPdfPage Page’);
}
}

When I navigate to that page I get the following error message:

ReferenceError: pdfjsLibs is not defined
at setupFakeWorkerGlobal (http://localhost:8100/build/main.js:143260:26)
at PDFWorker_setupFakeWorker [as _setupFakeWorker] (http://localhost:8100/build/main.js:143362:4)
at PDFWorker_initialize [as _initialize] (http://localhost:8100/build/main.js:143355:9)
at PDFWorker (http://localhost:8100/build/main.js:143342:8)
at Object.getDocument (http://localhost:8100/build/main.js:142824:12)
at PdfViewerComponent.loadPDF (http://localhost:8100/build/main.js:122326:15)
at PdfViewerComponent.ngOnChanges (http://localhost:8100/build/main.js:122315:18)
at Wrapper_PdfViewerComponent.ngDoCheck (/AppModule/PdfViewerComponent/wrapper.ngfactory.js:91:18)
at CompiledTemplate.proxyViewClass.View_Test4Page0.detectChangesInternal (/AppModule/Test4Page/component.ngfactory.js:67:32)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:111384:14)

Any help would be appreciated.

2

Well the provider array is for services and the PDF Component looks to be a component and thus does not belong there. On another note it is best practice to add services as well other elements in the highest NgModule to avoid multiple instances of the service. Since this is a Component it should be declared in this directives array of the class, but better yet add to the declarations array in the closest NgModule this would eliminate the need to import into the individual class. Also no need to inject the component in to the constructor that is for services. I would check the readme of the module.