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

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.