Ionic 4: Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Question

I am trying to use the cordova plugin in a new ionic 4 project but I always run into errors regarding cordova. The plugin is properly installed and shows up in the plugin folder.

Error

Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

home.page.html

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

<ion-content>
  <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>

home.page.ts

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() {
        const filePath = this.file.applicationDirectory + 'www/assets';

        if (this.platform.is('android')) {
      const fakeName = Date.now();
      this.file.copyFile(filePath, '5-tools.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}/5-tools.pdf`, 'application/pdf', options);
    }
  }

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

    transfer.download(downloadUrl, path + 'myfile.pdf').then(entry => {
      const 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));
      }
    });
  }
}

Answer 1

When you are using ionic serve you run your app as a website. So cordova won't be available. Thus leading to the error you are getting

You can bypass this in several ways.

First you could use the following to run it on the browser with cordova

ionic cordova platform add browser
ionic cordova run browser 

and run it on the browser

Second you could test this natively (or using an emulator) by issuing

ionic cordova platform add <ios/android>
ionic cordova run <android/ios> <--device>

--device if you are using a physical device or not if you intend to use an emulator. Of course this will require the JAVA SDK, ANDROID SDK and Gradle

In the long run I would recommend to go with later since you have test the app on a native device anyway