Error while using local Storage in Provider

Ionic Framework ionic-v3
1

I am getting an error when I try to add the local storage in a provider

Uncaught Error: Can't resolve all parameters for ItemslistProvider: (?).
    at syntaxError (compiler.js:466)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15547)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:15382)
    at CompileMetadataResolver._getInjectableMetadata (compiler.js:15362)
    at CompileMetadataResolver.getProviderMetadata (compiler.js:15722)
    at compiler.js:15633
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (compiler.js:15593)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15161)
    at JitCompiler._loadModules (compiler.js:33542)

Below is code deatils

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { IonicStorageModule } from '@ionic/storage';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AdminPage } from '../pages/admin/admin';
import { ItemslistProvider } from '../providers/itemslist/itemslist';
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AdminPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AdminPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    IonicStorageModule,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ItemslistProvider
    
  ]
})
export class AppModule {}

admin.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NgForm } from '@angular/forms';
import { ItemslistProvider } from '../../providers/itemslist/itemslist';

@IonicPage()
@Component({
  selector: 'page-admin',
  templateUrl: 'admin.html',
  providers : [ItemslistProvider]
})
export class AdminPage {
  constructor(public navCtrl: NavController, public navParams: NavParams ,public itemslistProvider : ItemslistProvider ) {
  }

  onAddItem(form:NgForm){
    console.log(form.value.itemName + " " + form.value.description  + " " + form.value.itemQuanity);
    this.itemslistProvider.onAddItem(form.value.itemName , form.value.description , form.value.itemQuanity);
    form.reset();
  }

  getNameList(){
    console.log("Check items");
    console.log(this.itemslistProvider.getItems());
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad AdminPage');
  }

}

itemlist.ts(Provider)
import { Injectable } from '@angular/core';
import { Itemlist } from '../../modals/itemlist';

@Injectable()
export class ItemslistProvider {
  private Items : Itemlist [] =[];

  constructor(public storage : Storage) {
    console.log('Hello ItemslistProvider Provider');
  }

  onAddItem( itemName:string,  description:string ,  itemQuanity: number){
    this.Items.push(new Itemlist (itemName , description , itemQuanity));
    console.log('adding items');
    //storing itemName in 
    // set a key/value
     this.storage.set('itemlist', this.Items).then(() => {
    }); 
  }

  getItems(){
       // Or to get a key/value pair
     this.storage.get('itemlist').then((items : Itemlist[]) => {
        console.log('Your items are', items);
        this.Items=items.slice();
        return this.Items.slice();
    }); 
  }

  removeItems(index : number){
    this.Items.splice(index,1);
  }
}

I have tried removing IonicStorageModule from app.module.ts and providers from admin.ts ( providers : [ItemslistProvider] )
But still, the same issue is there. Please help

2

Doesn’t look like you’re importing Ionic’s Storage in your provider class, so it’s likely using one from es6.d.ts. A further problem is that unless you know exactly what you’re doing and why, you don’t want a providers property on your AdminPage's @Component decoration.

1 Like
3

Yes, I don’t need providers mentioned in my admin.html. I was going through some options online to fix it and forget to remove it.
Tried your option of importing Ionic’s storage and its working. Thanks a lot :smile: