Uncaught (in promise): cordova_not_available in Ionic 2

Question

When I\'m running my Ionic app with ionic serve -l command, get following error message:

Runtime Error

Unca

Answer 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.

Answer 2

Using cordova simulator helps prevent Error: Uncaught (in promise): cordova_not_available.

- Install cordova simulator

npm install -g cordova-simulate

- Run cordova simulator:

• From the command line anywhere within a Cordova project, enter the following:

  simulate [platform] [--target=browser]

• platform is any Cordova platform that has been added to your project. Defaults to browser.

• browser is the name of the browser to launch your app in. Can be any of the following: default, chrome, chromium, edge, firefox, ie, opera, safari.

Example:

simulate android --target=chrome

The above command will opens 2 tabs in chrome browser with the following URLs and ports:

1. http://localhost:8000/simulator/index.html
2. http://localhost:8000/index.html

You can use simulator tab for changing and simulating device conditions such as GPS coordinates, internet connection type, device orientation, etc. and you can use other tab to test your app.

Answer 3

Download the Ionic View app and then run the command ionic upload.

You will then be able to preview the app on your phone and the native features will work.

Answer 4

this error is generated when you trying to access mobile functionalities on a non mobile device for example if you want access to mobile GPS you need cordova it's the link chain between javascript code and the targeted platform

the best thing to do is to test the environment you running on if its cordova so you don't fall in the cordova not fund error

    if (this.platform.is('cordova')) {
    // You're on a mobile device "IOS ANDROID WINDOWS" 
    // now you can call your native plugins
  } else {
    // You're testing in a browser so you may want to use another method or run your code on a emulator
  }

Answer 5

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.

Answer 6

ionic cordova platform add browser

ionic cordova run browser