Error: unable to access cordova in Ionic 2Another wording for this error message could be:

While running my Ionic app using the command ionic serve -l, I encountered the 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)

Additional 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 added the HotSpot plugin to my app with the following commands:

ionic plugin add cordova-plugin-hotspot --save

cordova plugin add cordova-plugin-hotspot --save

Usage in app.component.ts file

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);

 });
})
   }
  }

Furthermore, I checked similar threads but none of the solutions provided resolved my issue.

angularcordovatypescriptionic-frameworkionic2

Answer №1

While testing in the browser, ensure that you are accessing native plugins correctly. It is recommended to test on a real device to ensure proper functionality.

To make your code compatible with browser testing, consider implementing an if-statement to check for Cordova availability:

if (this.platform.is('cordova')) {
    // Execute native plugin calls when on a device
  } else {
    // Handle browser testing scenarios or mock plugin behavior
  }

EDIT:

Ricky Levi points out that Ionic supports the browser platform, allowing most common plugins to function. However, some plugins may not fully work in the browser environment, such as the Barcode Scanner which requires specific user interactions that cannot be replicated.

Answer №2

It's possible that things have changed since then, but Ionic is now compatible with the "browser" platform (instead of just browsing) - allowing Cordova plugins to be used in the browser environment.

To utilize this feature, you can add the platform by running 

ionic cordova platform add browser

Afterwards, you can execute ionic cordova run browser instead of using ionic serve (similar to how you would use ionic cordova run android or ionic cordova run ios)

Answer №3

Using Cordova plugins is only possible when your app is running on an actual device. Testing the app in a browser will not allow access to these native functionalities.

To determine if the app is running on a real device or in a browser, you can use the following code snippet:

if (this.platform.is('cordova')) {
  // The app is running on a device, so cordova plugins are accessible
} else {
  // Cordova plugins are not accessible, consider adding mock data if needed
}

This method is useful for testing app components that do not rely on cordova plugins. For comprehensive testing, it is recommended to run the app on a physical device or emulator.

Answer №4

To run the app in a browser:

1. Verify 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"
    }
   }

Include these checks in your methods using Cordova dependencies.

Answer №5

To avoid encountering the error 

Error: Uncaught (in promise): cordova_not_available
, it is recommended to utilize the cordova simulator.

- How to Set Up the cordova simulator

npm install -g cordova-simulate

- Executing the cordova simulator:

  • Simply run the following command from any location within a Cordova project in the command line:

    simulate [platform] [--target=browser]

  • The parameter platform refers to any specified Cordova platform integrated into your project, with default setting being browser.

  • browser denotes the particular browser for launching the app, which can be one of these options: default, chrome, chromium, edge, firefox, ie, opera, safari.

For instance:

simulate android --target=chrome

This command will initiate 2 tabs in the chrome browser featuring URLs and ports as follows:

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

The simulator tab enables adjustments and simulations for device circumstances like GPS coordinates, internet connection type, and device orientation. The second tab is utilized for testing the application itself.

Answer №6

To get a sneak peek of your app, first download the Ionic View application, then input the command ionic upload.

Afterwards, you can enjoy previewing your app on your mobile device with all its native functionalities fully operational.

Answer №7

This issue arises when attempting to utilize mobile features on a non-mobile device. For instance, if you require access to the mobile GPS, Cordova is necessary as it acts as the bridge connecting JavaScript code to the specified platform.

To avoid running into the "Cordova not found" error, it's advisable to verify the environment in which your code is being executed and ensure that Cordova is present.

    if (this.platform.is('cordova')) {
    // You are accessing from a mobile device such as IOS, Android, or Windows
    // Native plugins can now be utilized
  } else {
    // If testing on a browser, consider using an alternative method or run the code on an emulator
  }

Answer №8

Using the command: ionic cordova platform add browser

To run on a browser, use the command: ionic cordova run browser

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with updating BehaviorSubject not being reflected when called from my service component has been identified

In my HomeComponent, I am currently using *ngIf to switch between 3 components. The focus right now is on the relationship between two of them - the ProductListComponent and the ProductDetailComponent. Inside the ProductListComponent, there is a ProductLis ...

angulartypescript

Verify whether a component is a React.ReactElement<any> instance within a child mapping operation

I am facing a challenge with a component that loops through children and wraps them in a div. I want to exclude certain elements from this process, but I am struggling to determine if the child is a ReactElement or not (React.ReactChild can be a string or ...

javascriptreactjstypescript

What is the process to verify a password?

Hey everyone! I've successfully implemented control forms in my login.component.ts for handling email and password input. Now, I want to add these controls to my register.component.ts as well. Specifically, how can I implement controls for the passwor ...

angulartypescriptpasswordsangular-reactive-forms

Solving Angular2 Dependency Issues

I'm curious about Angular 2 and whether there's a way to resolve dependencies without having to use the constructor. In .NET, you can inject dependencies in three ways (constructor, setter, interface-based). Is it possible to do setter injection ...

angulardependency-injection

Issues with connecting to server through Angular websocket communication

I deployed the server on an Amazon AWS virtual machine with a public IP address of 3.14.250.84. I attempted to access it using Angular frontend like so: public establishWebSocketConnection(port : number){ this.webSocket = new WebSocket('ws://3.14.250. ...

angularamazon-web-serviceswebsocketconnection

Is there a way to retrieve the attributes of a generic object using an index in TypeScript?

I'm currently working on a function that loops through all the attributes of an object and converts ISO strings to Dates: function findAndConvertDates<T>(objectWithStringDates: T): T { for (let key in Object.keys(objectWithStringDates)) { ...

node.jstypescriptgenericstypescript-genericsindex-signature

Properties undefined

All of my functions are giving errors indicating that the props are not defined. The error specifically relates to the word "props" in the following functions: function PostButton(props) function PostButton2(props) function TotalVotes(props) ...

reactjstypescripttypesnext.js

Displaying JSON keys and values individually on an HTML page

Looking to display a JSON array in HTML using ngFor TypeScript : import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ng-for', templateUrl: './ng-for.component.html', styleUrls: ['./ng-for ...

javascripthtmlangular

typescriptExtract generic type from TypedDocumentNode<MyType, unknown> using introspection

I am currently utilizing a library that allows me to retrieve the type from a returned variable within a function. const myVar = gql(somestring) // The library function is called gql type myVarType = typeof myVar // The resultant value of myVarType is Typ ...

typescripttypescript-generics

The onShown event in ngx-bootstrap's datePicker is fired just before the calendar actually becomes visible

Recently, I've been exploring the capabilities of ngx-bootstrap's rangeDatePicker. My current challenge involves attempting to automatically navigate to the previous month as soon as the user opens the rangeDatePicker. To accomplish this, I have ...

angulartypescriptdatepickerngx-bootstrap

Strategies for steering clear of god components in Angular

Currently, I am delving into Angular and following the traditional approach of separating the template, styles, and component into 3 distinct files. The component file houses various functions that serve different purposes: Some functions are activated b ...

angular

What are some key indicators in the source code that differentiate TypeScript from JavaScript?

Reviewing some code on Github, I am looking for ways to quickly determine whether the script is written in JavaScript or TypeScript. Are there any simple tips or hints that can help with this? For instance, when examining an array declaration like the on ...

javascripttypescript

Unexpected behavior: Angular4/Javascript Date object alters when timezone is specified in Date constructor

In my Angular 4 application, I encountered an issue with a date retrieved from an API call. The date is in the format '1990-03-31T23:00:00-06:00' and when attempting to create a Date object and retrieve the month using getMonth(), it returns the ...

javascriptangulardate

Comparison between TypeScript's variable scope and JavaScript's variable scope

While researching, I discovered some intriguing discrepancies between the documentation regarding a commonly asked question. The TypeScript docs suggest that variables declared with var will escape the containing function's scope, but according to MS ...

javascripttypescriptvarlet

Angular Bounce Effect: Adding a Touch of Fun to Your

I'm utilizing the angular animation plugin ( https://www.npmjs.com/package/@angular/animations ) in my project. I am now looking to incorporate a bouncing effect when adding or removing items from an array. Below is the template snippet: <h2 *ngI ...

angularangular-animations

Retaining UI state across views in Ionic and AngularJS

In my experience with Ionic and AngularJS, I often run into the same issue when working on projects. I manipulate data with various displays such as lists and maps, and when a user clicks on an element, they are taken to a detailed page. It would be benef ...

angularjsgoogle-mapsionic-frameworkhybrid-mobile-app

The attribute 'map' is not found on the object of type 'List'

I am currently working on a project that involves lists, each with its own title. However, while using Map, I encountered the following error: Property 'map' does not exist on type 'List' Any suggestions on how to resolve this issue? ...

reactjstypescriptmaterial-ui

Prevent the element attribute from being enabled before the onclick function is triggered

I am attempting to implement a feature in Angular that prevents double clicking on buttons using directives. Below is the pertinent code snippet from my template: <button (click)="onClickFunction()" appPreventDoubleClick>Add</button> And her ...

angulartypescriptangular-directive

Upgrade to Angular 12: TypeScript is now an essential requirement for the Angular Compiler

Recently, I made sure to update my project to the latest Angular version. After running "ng update", I received a confirmation that everything was already up to date, indicating that all required packages had been successfully updated in the last step of t ...

angulartypescriptangular-cli

Angular Service Worker enhancements across various domains

Scenario Our team is currently developing an Angular application that is accessible through multiple domains. Depending on the domain, the app will display different colors and content, but it is essentially the same Angular application. To enhance perfo ...

angularservice-workerangular-service-workermultiple-domains