Ionic-native: cordova_not_available in NativeStorage

[jgw96]

_From @barocsi on November 20, 2016 18:59_

Ionic version: (check one with "x")

[x ] 2.x

I'm submitting a ... (check one with "x")
[ x] bug report

it should mock and work in browser using ionic serve, however it does not.

polyfills.js:3 Unhandled Promise rejection: cordova_not_available ; Zone: angular ; Task: Promise.then ; Value: cordova_not_available

according to
https://github.com/TheCocoaProject/cordova-plugin-nativestorage/issues/44
its not the plugins fault.

Any ideas?

_Copied from original issue: driftyco/ionic#9254_

[ihadeed]

@barocsi do you have the plugin installed? Are you running on device or simulator?

[dalezak]

I'm experiencing the same issue with RC3, have both cordova-plugin-nativestorage and cordova-plugin-secure-storage plugins installed but neither are working.

NativeStorage Error cordova_not_available

SecureStorage ReferenceError: Can't find variable: cordova



md5-cb1a52c061e049ce113d6c4a6e5edd7d



npm list --depth=0
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @ionic/[email protected]
├── @ionic/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[ihadeed]

Thanks for the feedback @dalezak I will look into this.

[mebibou]

Same issue using the ScreenOrientation plugin, when doing ScreenOrientation.lockOrientation('portrait'); it gives the error:

Uncaught (in promise): TypeError: Cannot read property 'apply' of undefined

Happens in the browser on ionic serve

[ihadeed]

@mebibou plugins don't work in the browser you need to test on a device or a simulator.

[ihadeed]

@dalezak @barocsi I wasn't able to reproduce the results you are having.

I created a fresh Ionic 2 project, installed the plugin using the command ionic plugin add cordova-plugin-nativestorage then used this code:

    this.platform.ready().then(() => {
      NativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
        .then(
          () => console.log('Stored item!'),
          error => console.error('Error storing item', error)
        );

      NativeStorage.getItem('myitem')
        .then(
          data => console.log(data),
          error => console.error(error)
        );
    });

[biesbjerg]

I think this is because of an ionic-cli bug, where Cordova is not available when using live reload, even when running on device. Looks like it's being worked on now when viewing recent commits:-)

[ihadeed]

@biesbjerg I was experiencing the same issue recently. I ran the command ionic run android to get the results above.

[mebibou]

@ihadeed I know Cordova is only available on a device, but should using the code not raise an exception when running in the browser? otherwise it basically means that we cannot use serve as soon as we use ionic-native? this is very restrictive, isn't there a way to mock the calls so that it doesn't crash? calling Splashscreen.hide(); works fine for example, or StatusBar.styleDefault(); so I was hoping not to have to try {} catch() {} every other that doesn't

[ihadeed]

@mebibou can you share with me some code that raises an exception while running in ionic serve?

I only had this issue with functions that return Observables. Promises and sync functions seem to be working fine.

[mebibou]

yes this does produce the error:

ScreenOrientation.lockOrientation('portrait');

[ihadeed]

@mebibou thanks I was able to reproduce the error. I will look into it.

[ihadeed]

@mebibou Ok I found the problem here.

See https://github.com/driftyco/ionic-native/blob/master/src/plugins/plugin.ts#L112

We check if the pluginRef exists before trying to call a function. Because in some cases, plugins have Web APIs ( I think only Geolocation does ... ). In this case, window.screen is the pluginRef for the ScreenOrientation plugin. The plugin adds properties to that global variables instead of creating it's own variable. So, Ionic Native thinks that the plugin has a Web API and attempts to call the function.

I think a good solution here would be to wrap the get() function in Ionic Native with a try/catch block to catch these kind of errors.

[mebibou]

@ihadeed but NativeStorage.getItem produces the same error, even though it returns a Promise. And since it just uses window.localStorage on the browser, shouldn't it just work as expected when running ionic serve ?

[ihadeed]

@mebibou I'm unable to produce that same error with NativeStorage.getItem(). I get a warning telling me Native: tried calling NativeStorage.getItem, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator..

Also, it's worth noting that ionic serve is not equivalent to browser platform. To run in browser platform you need to run the command ionic run browser.

[dalezak]

I think @biesbjerg might be right, the issue is related to the --livereload parameter.

I created a new Ionic 2.0.0-rc.3 project to test using the AppVersion plugin in the Simulator.

When I run ionic run ios --livereload --consolelogs --serverlogs I get the error:

Uncaught (in promise): cordova_not_available

When I run ionic run ios --consolelogs --serverlogs I am able to use the ionic-native plugin.

Not having the --livereload option really slows development :cry:

[ihadeed]

@dalezak This is fixed in the master branch of ionic-cli and ionic-app-scripts. Not sure if it's published yet.

[dalezak]

@ihadeed I'm using the packages for 2.0.0-rc.3 https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#updating-to-200-rc3

"dependencies": {
  "@angular/common": "2.1.1",
  "@angular/compiler": "2.1.1",
  "@angular/compiler-cli": "2.1.1",
  "@angular/core": "2.1.1",
  "@angular/forms": "2.1.1",
  "@angular/http": "2.1.1",
  "@angular/platform-browser": "2.1.1",
  "@angular/platform-browser-dynamic": "2.1.1",
  "@angular/platform-server": "2.1.1",
  "@ionic/storage": "1.1.6",
  "ionic-angular": "2.0.0-rc.3",
  "ionic-native": "2.2.3",
  "ionicons": "3.0.0",
  "rxjs": "5.0.0-beta.12",
  "zone.js": "0.6.26"
},
"devDependencies": {
  "@ionic/app-scripts": "0.0.45",
}

Should --livereload work on this? Or will I need to update some of the packages to newer versions?

[Maziar-Fotouhi]

I'm getting this on any device with and without --livereload:

[Warning] Native: tried calling NativeStorage.getItem, but the NativeStorage plugin is not installed. (main.js, line 1)
[Warning] Install the NativeStorage plugin: 'ionic plugin add cordova-plugin-nativestorage' (main.js, line 1)
[Log] error retrieving item – "plugin_not_installed" (main.js, line 5)

The strange thing is that I'm only getting this for NativeStorage and Device plugins. Other plugins like Globalization and Statusbar are working just fine.

[ihadeed]

@Maziar-Fotouhi are you waiting for deviceready to fire before calling the plugin?

If you read my comment above, I tried using NativeStorage without any problems using latest Ionic and ionic-native versions.

[Maziar-Fotouhi]

@ihadeed Thanks for replying. Yes, I'm doing everything after DeviceReady event. And I'm getting this for Device plugin as well.

[ihadeed]

Please share your code so I can test it on my end. If you can create a blank project, zip it, and send it over (without plugins and node_modules folders) that would be better.

[Maziar-Fotouhi]

@ihadeed Thanks a lot. I finally got it working with your recent update (2.2.11).

[dalezak]

@ihadeed Even on _ionic-native 2.2.11_ I'm still getting Uncaught (in promise): cordova_not_available when using --livereload with ionic run ios in the Simulator.

If I exclude --livereload I can use the ionic-native plugins just fine, but it really slows down the development process...

[Maziar-Fotouhi]

@dalezak I had a similar problem and I had to downgrade my app-scripts to 0.0.41 .
Make sure you change the npm scripts back to the previous form.

I have started an issue here:
https://github.com/driftyco/ionic-app-scripts/issues/515

[dalezak]

@Maziar-Fotouhi Woah, downgrading @ionic/app-scripts to 0.0.42 fixed the issue!

Thank you, I subscribed to driftyco/ionic-app-scripts#515 so I'll know when its been resolved.

[Maziar-Fotouhi]

@dalezak You're very welcome. I made a mistake in my previous comment though. [email protected] did not work for me. I actually downgraded to[email protected] .

I have edited my previous comment now.

[dalezak]

@Maziar-Fotouhi Which version of ionic-native were you using with [email protected]?

I thought things were working because I wasn't getting Uncaught (in promise): cordova_not_available anymore, but now I'm getting Native: tried accessing the SQLite plugin but it's not installed. or Cordova is not available. Make sure to include cordova.js or run in a device/simulator when ever I include --livereload.

[Maziar-Fotouhi]

@dalezak I'm not using _SQLite_, but I was getting the same error for _NativeStorage_ on [email protected] and above. It was fixed when I went back to [email protected].

Another thing that I noticed is that, I was getting the same error when I was occasionally calling _NativeStorage_ before this.platform.ready() was fired. Make sure you're waiting for the DeviceReady event before trying to call any of the cordova plugins.

Here are my npm packages:

"dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "ng2-translate": "3.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.41",
    "typescript": "2.0.9"
  },

and other environment versions:

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.15
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.41
ios-deploy version: 1.9.0 
ios-sim version: 5.0.12 
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.1 Build version 8B62

I may be able to help if you can provide your system info and npm packages.

[dalezak]

@Maziar-Fotouhi I'm still having issues whenever I include --livereload :cry:

If I run the following, then none of the ionic-native plugins work.

ionic run ios --livereload --consolelogs --serverlogs --address localhost --port 3000

If I run it without --livereload, then theionic-native plugins just fine but don't have any console logs and need to restart the app whenever I make changes.

Here are my dependencies and environment info.

"dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "moment": "2.17.1",
    "ng2-lazyload-image": "2.2.2",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.41",
    "typescript": "2.0.9"
  },

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.14
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.41
ios-deploy version: 1.9.0
ios-sim version: 5.0.12
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.1 Build version 8B62

[Maziar-Fotouhi]

@dalezak The only difference between our environment is the ionic-cli versions. Try updating to 2.1.15 which has just released (yesterday!). These are the ionic-cli changelogs:
https://github.com/driftyco/ionic-cli/blob/master/CHANGELOG.md

Look at the version 2.1.15 change logs. I'm not sure but updating ionic-cli might solve your issue. Just run npm install [email protected] -g (you might need to sudo this).

Also, take a look at this thread. It seems to be known issue with app-scripts.
https://github.com/driftyco/ionic-app-scripts/issues/467

My understanding so far is that this issue is not related to ionic-native.

Please let us know of the outcome.

Update:

Also, try updating to the nightly version of app-scripts:
ionic/app-scripts@nightly

There has been some changes that are not released yet.

[ihadeed]

Run npm i -g ionic@test and then run npm i --save-dev @ionic/app-scripts@nightly in your app root directory. Finally, rename main.dev.ts to main.ts (upcoming change with file structure). This should fix any livereload issues that you're having.

[dalezak]

Woah! @ihadeed looks like that fixed my livereload issue, thank you!

And thanks @Maziar-Fotouhi for helping debug and track down the problem :+1:

[mebibou]

@ihadeed what about this, should I open an issue re:

@mebibou Ok I found the problem here.
See https://github.com/driftyco/ionic-native/blob/master/src/plugins/plugin.ts#L112
We check if the pluginRef exists before trying to call a function. Because in some cases, plugins have Web APIs ( I think only Geolocation does ... ). In this case, window.screen is the pluginRef for the ScreenOrientation plugin. The plugin adds properties to that global variables instead of creating it's own variable. So, Ionic Native thinks that the plugin has a Web API and attempts to call the function.
I think a good solution here would be to wrap the get() function in Ionic Native with a try/catch block to catch these kind of errors.

[ihadeed]

@mebibou sure yeah. So we can track the issue.

[farhaan008]

Error storing item in localStore cordova_not_available.
Unhandled rejection Error
NativeStorage.setItem('localStore', this.regUser).then( ()=> console.log('Item stored in localStore'), error=> console.log('Error storing item in localStore', error));

[ihadeed]

@farhaan008
Make sure to

• use latest ionic-native version ( 2.2.16 as of this comment )
• run on device
• wait for deviceready event to fire

[tscislo]

Hi,

Can you yous confirm that statement taken from here: https://ionicframework.com/docs/native/secure-storage/
"The browser platform is supported as a mock only. Key/values are stored unencrypted in localStorage."
Is true?
Because on browser using ionic serve I get cordova_not_available error in catch statement when I try to create a new secure storage.

[mebibou]

@tscislo platform browser and ionic serve are two different things

[tscislo]

@mebibou what is browser platform?

Other cordova plugins when we try to use them using ionic serve gracefully fallback to either notification that those features are unsupported in browser or provide some polyfill in browser. Unfortunately SecureStorage does not provide it. It simply resolves its promise with an error.

[Maziar-Fotouhi]

@tscislo runionic cordova platform ls and you will see a list of cordova platforms that you can use including android and ios. You will see browser listed there as well.
So similar to iOS and Android, you can run ionic cordova run browser.
This will start a page/tab in your browser just like ionic serve. The main difference is that now you are running the app in the cordova environment just like a device.

[tscislo]

@Maziar-Fotouhi thanks! That makes a lot of sense. However still I'm wondering why other @ionic-native services while running using ionic serve do not throw errors they just throw warnings that things are not supported, which is fine. Just wondering why @ionic-native/secure-storage does not behave like that especially considering the fact that using browser platform it falls back to localStorage which would be perfect solution for launching it using ionic serve.

[Maziar-Fotouhi]

@tscislo Yes that is right. When you runionic serve, you are not in a cordova environment so the ionic-native packages (which are actually cordova plugins) are not available. But when you run ionic cordova run browser the plugins should be available.
As far as the storage stuff is concerned, what you are looking for may be ionic storage:
http://ionicframework.com/docs/storage/
If you do not want to use SQLite and prefer to use NativeStorage instead, you will have to implement that manually.

[renjithspace]

Update @ionic/app-scripts

$ npm i -D @ionic/app-scripts@latest
It works fine for me.

[shunulia]

util.js:66 Native: tried calling GooglePlus.login, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:66