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

Uncaught (in promise): cordova_not_available

Stack

Error: Uncaught (in promise): cordova_not_available
at v (http://localhost:8100/build/polyfills.js:3:4864)
at s (http://localhost:8100/build/polyfills.js:3:4289)
at s (http://localhost:8100/build/polyfills.js:3:4112)
at http://localhost:8100/build/polyfills.js:3:4652
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:10284)
at Object.onInvokeTask (http://localhost:8100/build/main.js:38692:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:10220)
at e.runTask (http://localhost:8100/build/polyfills.js:3:7637)
at i (http://localhost:8100/build/polyfills.js:3:3707)
at HTMLDocument.invoke (http://localhost:8100/build/polyfills.js:3:11437)

other details

Ionic Framework: 2.2.0
Ionic Native: 2.8.1
Ionic App Scripts: 1.1.4
Angular Core: 2.4.8
Angular Compiler CLI: 2.4.8
Node: 6.9.2
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

I Install HotSpot plugin, with following command :

ionic plugin add cordova-plugin-hotspot --save

cordova plugin add cordova-plugin-hotspot --save

Usage app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen,Hotspot,Network } from 'ionic-native';
import { TabsPage } from '../pages/tabs/tabs';


@Component({
 templateUrl: 'app.html'
})

export class MyApp {
rootPage = TabsPage;

 constructor(platform: Platform) {

  platform.ready().then(() => {
     StatusBar.styleDefault();
     Splashscreen.hide();
     Hotspot.scanWifi().then((networks: Array<Network>) => {
     console.log(networks);

 });
})
   }
  }

Also, I saw similar questions but they didn't solve the problem.

score 77 · Accepted Answer · edited Dec 25 '18 at 18:31

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.

score 68 · Answer 2 · edited Jan 23 '18 at 14:17

68

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 )

edited Jan 23 '18 at 14:17

Snow

1,058
2
19
47

answered Jul 02 '17 at 19:33

Ricky Levi

7,298
1
57
65

4

Note this is only available for a very limited amount of plugins! – JoeriShoeby Sep 25 '17 at 08:36
2

This works well for me. Note that `ionic run` has been renamed to `ionic cordova run`. – Micha Schwab Dec 27 '17 at 20:59

Andreas Gassmann · Answer 3 · 2017-06-07T16:41:30.527

12

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.

edited Jun 07 '17 at 16:41

answered Mar 17 '17 at 08:23

Andreas Gassmann

6,334
7
32
45

This worked for me. If outside of the constructor, it should be prepended with `this` – DiegoRBaquero May 03 '17 at 16:16

score 3 · Answer 4 · edited Sep 18 '17 at 13:01

3

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.

edited Sep 18 '17 at 13:01

Sneha

2,200
6
22
36

answered Sep 18 '17 at 12:22

Siddharth

31
1

With this method, #ionic serve will work without any alert – Siddharth Sep 18 '17 at 12:23

score 3 · Answer 5 · answered Mar 26 '19 at 14:20

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:

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.

score 2 · Answer 6 · answered Mar 16 '17 at 22:04

2

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.

answered Mar 16 '17 at 22:04

Chris

4,672
13
52
93

Where to download Ionic View app? Can you place download link here? – Hamid Araghi Mar 29 '19 at 07:30
Don't think this exists any more. Instead download Ionic DevApp and then run ionic serve -c. You will then be able to see your app running inside Ionic DevApp – Chris Mar 29 '19 at 09:31
I've downloaded Ionic DevAp. But in my case `CORS` read blocking occurs when I use `livereload`. – Hamid Araghi Mar 29 '19 at 10:13

score 1 · Answer 7 · answered Mar 17 '18 at 23:04

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
  }

score 1 · Answer 8 · answered Jun 25 '20 at 06:18

1

ionic cordova platform add browser

ionic cordova run browser

answered Jun 25 '20 at 06:18

Onur İnci

118
1
8

Uncaught (in promise): cordova_not_available in Ionic 2

8 Answers8

- Install `cordova simulator`

- Run `cordova simulator`:

Linked

Uncaught (in promise): cordova_not_available in Ionic 2

8 Answers8

- Install cordova simulator

- Run cordova simulator:

Linked

- Install `cordova simulator`

- Run `cordova simulator`: