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 {}

Could you please try `console.log("Object :",obj)` after your `let obj = {selectedRadious: this.selectedRadious, DistanceUnit: this.DistanceUnit};` line in the code and see what it prints. As they are async operations, I am not sure if they get resolved immediately. Try doing that 4-5 times. — Sagar Kulkarni, Apr 04 '17 at 06:11
i have tried `console.log("Object :",obj)` after your let `obj = {selectedRadious: this.selectedRadious, DistanceUnit: this.DistanceUnit}; ` line in the code and its print `undefine`. how can i solve this? — alka vaghela, Apr 04 '17 at 08:32

Suraj Rao · Accepted Answer · 2023-04-24T06:19:38.123

47

For version 3.0.0 onwards angular specific storage can be found in @ionic/storage-angular package.

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

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

app.module.ts

import { IonicStorageModule } from '@ionic/storage';//for v 2.0.0 and below 3.0.0


//..
@ngModule({

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

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

Check release notes here

edited Apr 24 '23 at 06:19

answered Apr 04 '17 at 06:11

Suraj Rao

29,388
11
94
103

6

This wasn't obvious to me, so I'd like to add you need to remove import { Storage } from '@ionic/storage'; – Anthony Apr 15 '17 at 16:48
Here's the is the actual documentation for this https://github.com/ionic-team/ionic-storage/releases/tag/v2.0.0 – Cengkuru Michael Sep 13 '17 at 09:39
I removed import { Storage } from '@ionic/storage'; already, but still showing this error when I run 'ionic cordova build ios --prod' – Yuyang He Oct 06 '17 at 08:13
Thanks a lot. Should have known to remove import { Storage } from '@ionic/storage'; – Vince Banzon Jan 29 '18 at 11:55

iOSAndroidWindowsMobileAppsDev · Answer 2 · 2017-07-12T12:07:42.733

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

thank you. installing the ionic storage plugin worked for me `npm install --save @ionic/storage` — Jake Boomgaarden, Nov 27 '18 at 07:53

score 3 · Answer 3 · edited Nov 07 '17 at 19:30

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
  ]
})

score 1 · Answer 4 · answered Apr 04 '17 at 10:45

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.

You are welcome. You can accept the answer and close this question. :) — Sagar Kulkarni, Apr 04 '17 at 10:57

score 1 · Answer 5 · answered May 15 '17 at 10:51

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

score 0 · Answer 6 · answered May 23 '17 at 05:49

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.

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

6 Answers6

Linked