Ionic-framework: "No provider for NativeStorage!" in angular service.

Created on 16 May 2017  路  3Comments  路  Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

With any other Native library I've been using, it was just enough to include it and inject it in the constructor.

With NativeStorage, however, I keep getting the error Error: No provider for NativeStorage!.

The usage I'm doing in my service is this (just the relevant part):

import { Injectable } from '@angular/core';
import { NativeStorage } from '@ionic-native/native-storage';

export class DatabaseError {
    public reason: string = "";
    constructor(reason) {
        this.reason = reason;
    }
}

@Injectable()
export class DatabaseService {
    constructor(private nativeStorage: NativeStorage) {

    }

If I try to inject it as a "provider" in the module, it says that "Cordova is not ready".

Expected behavior:

I would expect this to just work, I can't really understand why it can't be used in an angular service.

Ionic info::

global packages:

    @ionic/cli-utils : 1.0.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.0.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.0.0
    @ionic/cli-plugin-ionic-angular : 1.0.0
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v6.10.2
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

Most helpful comment

Use ionic cordova run browser instead of ionic serve and it will work (emulated) in the browser.

All 3 comments

Oh well, I've figured this out.

The documentation is tremendously unclear, and I'm refering to this: https://ionicframework.com/docs/native/native-storage/ or really this: https://ionicframework.com/docs/native/

First of all, the command: ionic plugin add doesn't work any further, I had to use: ionic cordova plugin add and follow the prompt.

Second, you have to inject in the module, under "providers" the desired plugin. I had to check the github page to find this out, it would be worth to mention it in the official documentation.

That said, NativeStorage, differently from any previous ionic storage, is native-related (and it's pretty much possible to guess it from the name). So you can't test it under ionic serve, only on a physical device.

That said, remember to follow these steps:

1) Detect the plugin you need.
2) Install it (either through package.json, either using npm).
3) Install the cordova plugin.
4) Include it in your app.ts (or the file where you have your app module) and inject it under "Providers".
5) Have fun.

Use ionic cordova run browser instead of ionic serve and it will work (emulated) in the browser.

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings