Issues trying to open PDF with native viewer

cordova
1

I followed a video tutorial on opening a PDF using native cordova plugins. The app runs, but when I move it to my Android device - it doesn’t open a local or remote PDF.

Instead I get the following error:

ERROR TypeError: Cannot read property 'then' of undefined
    at HomePage.push../src/app/home/home.page.ts.HomePage.openLocalPdf (home-home-module.js:112)
    at Object.eval [as handleEvent] (ng:///HomePageModule/HomePage.ngfactory.js:24)
    at handleEvent (vendor.js:57150)
    at callWithDebugContext (vendor.js:58220)
    at Object.debugHandleEvent [as handleEvent] (vendor.js:57947)
    at dispatchEvent (vendor.js:54599)
    at vendor.js:55046
    at HTMLElement.<anonymous> (vendor.js:66909)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2785)
    at Object.onInvokeTask (vendor.js:51333)
View_HomePage_0 @ ng:///HomePageModule/HomePage.ngfactory.js:19

I have the exact code, so I’m not sure what’s wrong and I’m hoping another pair of eyes can help. The local PDF is called my.pdf and is in the assets folder.

html file

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic PDFs
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button expand="full" (click)="openLocalPdf()">Open Local PDF</ion-button>
  <ion-button expand="full" (click)="downloadAndOpenPdf()">Download and open PDF</ion-button>
</ion-content>

ts file

import { Platform } from '@ionic/angular';
import { File } from '@ionic-native/File/ngx';
import { Component } from '@angular/core';
import { FileOpener } from '@ionic-native/file-opener/ngx';
import { DocumentViewer, DocumentViewerOptions } from '@ionic-native/document-viewer/ngx';
import { FileTransfer } from '@ionic-native/file-transfer/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {


  constructor(private platform: Platform, private file: File, private ft: FileTransfer,
              private fileOpener: FileOpener, private document: DocumentViewer) {

  }

  openLocalPdf() {
    let filePath = this.file.applicationDirectory + 'www/assets';

    if (this.platform.is('android')) {
      let fakeName = Date.now();
      this.file.copyFile(filePath, 'my.pdf', this.file.dataDirectory, `${fakeName}.pdf`).then(result => {
        this.fileOpener.open(result.nativeURL, 'application/pdf')
            .then(() => console.log('File is opened'))
            .catch(e => console.log('Error opening file', e));
      });
    } else {
      // Use Document viewer for iOS for a better UI
      const options: DocumentViewerOptions = {
        title: 'My PDF'
      }
      this.document.viewDocument(`${filePath}/my.pdf`, 'application/pdf', options);
    }
  }

  downloadAndOpenPdf() {
    let downloadUrl = 'https://devdactic.com/html/5-simple-hacks-LBT.pdf';
    let path = this.file.dataDirectory;
    const transfer = this.ft.create();

    transfer.download(downloadUrl, path + 'myfile.pdf').then(entry => {
      let url = entry.toURL();

      if (this.platform.is('ios')) {
        this.document.viewDocument(url, 'application/pdf', {});
      } else {
        this.fileOpener.open(url, 'application/pdf')
            .then(() => console.log('File is opened'))
            .catch(e => console.log('Error opening file', e));
      }
    });
  }
}

Any know what I’m doing wrong or can point me to a working example?

2

Hi dear friend, I found the fix, you must replace the follow line:

let filePath = this.file.applicationDirectory + ‘www/assets/’;
to
let filePath = this.file.applicationDirectory + ‘public/assets/’;