Trying to implement on ionic2 apps but failed

[nessgor]

I followed your instruction for installation, and can import PdfViewerComponent in typescript file

pdf.ts

import {Component} from "@angular/core";
import {Platform, NavParams, ViewController} from 'ionic-angular';
import {PdfViewerComponent} from 'ng2-pdf-viewer';

@Component({
  templateUrl: 'build/pages/pdf/pdf.html',
  directives: [PdfViewerComponent]
})

export class PDFContentPage {
  pdf;

  constructor(
      public platform: Platform,
      public params: NavParams,
      public viewCtrl: ViewController
  ) {
    this.pdf = {
      name: this.params.get("name"),
      url:  this.params.get("url"),
    }
  }

  dismiss() {
    this.viewCtrl.dismiss();
  }
}

pdf.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      {{pdf.name}}
    </ion-title>
    <ion-buttons start>
      <button (click)="dismiss()">
        <span primary showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <pdf-viewer src="{{pdf.url}}" original-size="true" show-all="true"></pdf-viewer>
</ion-content>

And the chrome dev tools shows the following

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/build/js/app.bundle.worker.js

If I copy the pdf.worker.js file from node_modules/pdfjs-dist/build/pdf.worker.js to www/js/ and rename the file to app.bundle.worker.js, it works fine.

But ionic will recompile the js before build so this is not a solution. I try to trace the error stack and find some clue:

pdf.js (line 9565)

var PDFWorker = (function PDFWorkerClosure() {
  var nextFakeWorkerId = 0;

  function getWorkerSrc() {
    if (typeof workerSrc !== 'undefined') {
      return workerSrc;
    }
    if (getDefaultSetting('workerSrc')) {
      return getDefaultSetting('workerSrc');
    }
    if (pdfjsFilePath) {
      return pdfjsFilePath.replace(/\.js$/i, '.worker.js');
    }
    error('No PDFJS.workerSrc specified');
  }

Ionic2 will compile all js and ts to a single js file called app.bundle.js. The reason why getting "app.bundle.worker.js" is because of the

if (pdfjsFilePath) {
      return pdfjsFilePath.replace(/\.js$/i, '.worker.js');
    }

trying to change pdf.js -> pdf.worker.js but failed in this scenario and changed app.bundle.js -> app.bundle.worker.js

That what I knew so far and got stuck. Got no idea how to solve this. Any help or guidance would be appreciated.

[VadimDez]

@nessgor Thanks a lot for all your work and such detailed issue description! I will try to fix this as soon as i can!

[VadimDez]

@nessgor, Meanwhile, you could also try for now to use pdfjs-dist/build/pdf.combined.js instead of pdfjs-dist/build/pdf.js which has a fake web worker.

[nessgor]

You are welcome! I can't find any modules to display PDF file for ionic2 but angular2 module should work with ionic2 also. It would be great if this directive can support ionic2.

[nessgor]

It works when I remove pdf.js and renamed pdf.combined.js to pdf.js in pdfjs-dist, sweet :)
Thank you so much.