Can't resolve all parameters for Storage: (?)

Question

I am getting values from a modal and I want to store and get it using local storage in ionic2 angular2 project. My code is given below. It gives following error:

In home.ts page, I have imported storage

import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers :[
  Storage
]
})

export class HomePage {
 private DistanceUnit: string;
 private selectedRadious : number;

 constructor(public navCtrl: NavController
          public modalCtrl: ModalController,
          public storage: Storage) {


}

presentModal() {
this.storage.get('distUnit').then((val) => {
  console.log('Your distUnit is', val);
  this.DistanceUnit = val;     
})
.catch(err=>{
  console.log('Your distUnit dont exist: ' + JSON.stringify(err));
  this.DistanceUnit = 'Meters';
});

 this.storage.get('SetRadious').then((val) => {
  console.log('Your SetRadious is', val);
  this.selectedRadious = val;
})
 .catch(err=>{
  console.log('Your SetRadious dont exist: ' + JSON.stringify(err));
    this.selectedRadious = 500;
});


let obj = {selectedRadious: this.selectedRadious, DistanceUnit: this.DistanceUnit};
let myModal = this.modalCtrl.create(SettingModalPage, obj);

myModal.onDidDismiss(data => {
  console.log('modal value: '+data.DistanceUnit)
  this.DistanceUnit = data.DistanceUnit;
  this.selectedRadious = data.selectedRadious;

 this.storage.set('distUnit', this.DistanceUnit);
 this.storage.set('SetRadious', this.selectedRadious);
});

myModal.present();
}
}

In app.module.ts file,

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { Storage } from '@ionic/storage';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DetailsPage } from '../pages/details/details';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TypeApi } from '../shared/shared';
import { PlaceDetailService } from '../shared/shared';
import { LaunchNavigator, LaunchNavigatorOptions } from '@ionic- native/launch-navigator';
import { SettingModalPage } from '../pages/setting-modal/setting-modal';

@NgModule({
  declarations: [
  MyApp,
  HomePage,
  DetailsPage,
  SettingModalPage

],
imports: [
  IonicModule.forRoot(MyApp),
  HttpModule
],
bootstrap: [IonicApp],
  entryComponents: [
  MyApp,
  HomePage,
  DetailsPage,
  SettingModalPage
],
providers: [
  Storage,
  TypeApi,
  PlaceDetailService,
  LaunchNavigator,
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Answer 1

In addition to Suraj's answer I found that I needed to explicitly create the Storage object in the constructor passing in the options e.g.

	this.storage=new Storage({name:"__mydb"});

So I did not include "Storage" in the providers for my component, nor in the constructor

Answer 2

You need to move the code where you are accessing the values from a resolved promise into the .then() of that promise. Since, it is async operation, by the time you use it, it might not be available.

E.g. this could work:

presentModal() {
    this.storage.get('distUnit').then((val) => {
        console.log('Your distUnit is', val);
        this.DistanceUnit = val;
        this.storage.get('SetRadious').then((val) => {
            console.log('Your SetRadious is', val);
            this.selectedRadious = val;

            this.modalCreator();
        })
        .catch(err=>{
            console.log('Your SetRadious dont exist: ' + JSON.stringify(err));
            this.selectedRadious = 500;
            this.modalCreator();
        });
    })
    .catch(err=>{
        console.log('Your distUnit dont exist: ' + JSON.stringify(err));
        this.DistanceUnit = 'Meters';

        this.storage.get('SetRadious').then((val) => {
            console.log('Your SetRadious is', val);
            this.selectedRadious = val;

            this.modalCreator();
        })
        .catch(err=>{
            console.log('Your SetRadious dont exist: ' + JSON.stringify(err));
            this.selectedRadious = 500;
            this.modalCreator();
        });
    });
}

modalCreator(){
    let obj = {selectedRadious: this.selectedRadious, DistanceUnit: this.DistanceUnit};
    let myModal = this.modalCtrl.create(SettingModalPage, obj);

    myModal.onDidDismiss(data => {
        console.log('modal value: '+data.DistanceUnit)
        this.DistanceUnit = data.DistanceUnit;
        this.selectedRadious = data.selectedRadious;

        this.storage.set('distUnit', this.DistanceUnit);
        this.storage.set('SetRadious', this.selectedRadious);
    });
    myModal.present();
}

If you read the code carefully, you will get to know that I have handled all the cases for getting both the parameters and if one of them fails. Check it out and let me know.

Answer 3

I've had this problem myself. First, you need to see this update.

Basically you need to:

• Remove Storage from your providers in app.module.ts
• import { IonicStorageModule } from '@ionic/storage' instead of import { IonicStorage } from '@ionic/storage' in app.module.ts
• Add IonicStorageModule.forRoot() to the imports array in app.module.ts

After that though, I still had the error (Can't resolve all parameters for Storage: (?)). I found out that I was using Storage as a provider in a component. You need to remove it. See below:

@Component({
  selector: 'login',
  templateUrl: 'login.component.html',
  providers: [
    AuthService,
    // Storage, <-- you need to remove this
    JwtHelper
  ]
})

Answer 4

I encountered the same problem whilst following this cool tut. If should you choose to follow the tut, make sure you have installed the cordova plugins listed at the beginning of the video:

https://www.youtube.com/watch?v=Cnj9fQCyflY

http://technotip.com/5171/ionic-storage-ionic-2/

and this is how you resolve the error:

In Ionic 3...

From the below url:

https://ionicframework.com/docs/storage/

First, if you'd like to use SQLite, install the cordova-sqlite-storage plugin:

ionic cordova plugin add cordova-sqlite-storage

Next, install the package (comes by default for Ionic apps > Ionic V1):

npm install --save @ionic/storage

Next, add it to the imports list in your NgModule declaration (for example, in src/app/app.module.ts):

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [      
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    // ...
  ]
})
export class AppModule {}

Finally, inject it into any of your components or pages:

import { Storage } from '@ionic/storage';

export class MyApp {
  constructor(private storage: Storage) { }

  ...

  // set a key/value
  storage.set('name', 'Max');

  // Or to get a key/value pair
  storage.get('age').then((val) => {
    console.log('Your age is', val);
  });
}

Answer 5

The answer from suraj brought the decisive solution.

I had the same problem. In app.module.ts I had both specified: import {IonicStorageModule} from '@ionic/storage'; and: import {Storage} from '@ionic/storage'. When I could not solve the problem, I have installed: npm install @ionic/storage. I have removed: import {Storage} from '@ionic/storage' from app.module.ts, and only left this: import {IonicStorageModule} from '@ionic/storage'; After that the problem was fixed.

Answer 6

From @ionic/storage version - 2.0.0, make the below changes:

app.module.ts

import { IonicStorageModule } from '@ionic/storage';

//..
@ngModule({

imports: [
  IonicModule.forRoot(MyApp),
  HttpModule,
  IonicStorageModule.forRoot(),
]

Note: you need to remove import { Storage } from '@ionic/storage';

Check release notes here