Local storage in ionic 2 error

0
votes

I try to use this in my Ionic 2 application : https://ionicframework.com/docs/v2/storage/

I already run 

cordova plugin add cordova-sqlite-storage --save

and 

npm install --save @ionic/storage

Successfully.

And when I tried to add Storage in my app.module.ts, I had this error :

Error: Can't resolve all parameters for Storage: (?).
    at v (http://localhost:8100/build/polyfills.js:3:4864)
    at SyntaxError.BaseError [as constructor] (http://localhost:8100/build/main.js:127193:27)
    at new SyntaxError (http://localhost:8100/build/main.js:11660:16)
    at CompileMetadataResolver._getDependenciesMetadata (http://localhost:8100/build/main.js:27183:31)
    at CompileMetadataResolver._getTypeMetadata (http://localhost:8100/build/main.js:27058:26)
    at CompileMetadataResolver._getInjectableMetadata (http://localhost:8100/build/main.js:27046:21)
    at CompileMetadataResolver.getProviderMetadata (http://localhost:8100/build/main.js:27288:40)
    at http://localhost:8100/build/main.js:27246:49
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:8100/build/main.js:27213:19)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/main.js:26897:50)
    at JitCompiler._loadModules (http://localhost:8100/build/main.js:72991:64)
    at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/main.js:72951:52)
    at JitCompiler.compileModuleAsync (http://localhost:8100/build/main.js:72917:21)
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:8100/build/main.js:52753:25)

I don't understand how I have to do to solve it.

My app.module.ts :

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

providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    PData,
    PBackground,
    PTranslate,
    Storage
  ]

...
2
androidioscordovaionic2

2 Answers

11
votes

Since Ionic 2.2.0, it's recommended to use @ionic/storage version 2.0.0. Configuration in app.modules.ts has changed since the previous version. The error occurs if you haven't changed everything in the right way.

In app.modules.ts do following changes:

  1. Remove Storage from providers

  2. Change import statement:

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

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

  3. Add the following to the imports array:

    IonicStorageModule.forRoot()

The import array should look like below: 

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



NOTE: Do not make any change in imports of Storage in any other files.

0
votes

Your app.module.ts should look like,

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

export function provideStorage() {
  return new Storage(['sqlite', 'websql', 'indexeddb'], { name: 'database_name' });
}

@NgModule({
  declarations: [
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
  ],
  providers: [
    { provide: Storage, useFactory: provideStorage }, Storage
  ]
})

You have to use set() and get() methods to store and retrieve data in your pages. Have a look at Ionic 2 Storage Tutorial Blog with example video. Hope this helps