Uncaught (in promise): cordova_not_available in Ionic 2

Solution 1:

You are accessing native plugins while testing in the browser. In order to make plugins work, you should use a real device to test.

In order to make your code testable in browser (or actually don't break when testing in browser) you should have an if-statement checking if Cordova is available :

  if (this.platform.is('cordova')) {
    // You're on a device, call the native plugins. Example: 
    //
    // var url: string = '';
    // 
    // Camera.getPicture().then((fileUri) => url = fileUri);
  } else {
    // You're testing in browser, do nothing or mock the plugins' behaviour.
    //
    // var url: string = 'assets/mock-images/image.jpg';
  }

EDIT:

As Ricky Levi correctly mentions here below, Ionic supports the browser platform. Using this platform, most common plugins are able to work. Note that some plugins would not, for example the Barcode-scanner plugin. As it will prompt you with an alert, asking for the value that has to be scanned. Which will lose the whole use-case of a Barcode Scanner.

Solution 2:

Maybe something has changed since then, but Ionic now supports the "browser" as a platform ( vs simply browse ) - which makes the Cordova plugins available in the browser.

To use it you add the platform ionic cordova platform add browser

And then you run ionic cordova run browser vs ionic serve ( ionic run browser - just like ionic cordova run android or ionic cordova run ios )

Solution 3:

Cordova is only accessible when you run your app on a real device. When you test your app in the browser, it cannot access those native plugins.

You can check if you are on a real device or a browser like that:

if (this.platform.is('cordova')) {
  // You are on a device, cordova plugins are accessible
} else {
  // Cordova not accessible, add mock data if necessary
}

This will only help you test the parts of your app that don't rely on cordova plugins. To really test your app, you need to run it on a device or in the emulator.

Solution 4:

For running the app in browser

1.Check the platform

# import {Platform} from 'ionic-angular';
 # constructor(public platform:Platform) {
     if (this.platform.is('core')) {
      this.myPlatform = "Browser";
      console.log('I am on a web browser')
    } else {
      this.mobileDevice = "True"
    }
   }

Use these checking in your methods where you are implementing the Cordova dependencies.