Error Ionic2: "Sin proveedor para almacenamiento"

Después de leer todo lo que pude encontrar, y fallar, debo preguntar aquí:

Estoy tratando de usar el almacenamiento de ionic2, tal como el doc me dice,

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

aquí está mi Código:

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 { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { Intro } from '../pages/intro/intro'; import { Checklist } from '../pages/checklist/checklist'; // import { Http } from '@angular/http'; import {IonicStorageModule} from '@ionic/Storage'; import { Data } from '../providers/data'; import {HttpModule} from '@angular/http'; // import {Storage} from '@ionic/storage'; @NgModule({ declarations: [ MyApp, HomePage, Intro, Checklist ], imports: [ HttpModule, BrowserModule, IonicModule.forRoot(MyApp), IonicStorageModule.forRoot() ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, Intro, Checklist ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, // Storage, //Http, Data ], }) export class AppModule {} data.ts import { Injectable } from '@angular/core'; // import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; // import { HttpModule } from '@angular/http'; import { Storage } from '@ionic/storage'; @Injectable() export class Data { constructor(public storage: Storage) { } /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// getData(): Promise<any> { return this.storage.get('checklists'); } /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// save(data): void { let saveData = []; //Remove observables data.forEach((checklist) => { saveData.push({ title: checklist.title, items: checklist.items }); }); let newData = JSON.stringify(saveData); this.storage.set('checklists', newData); } /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// } 

home.ts

 // import { Component } from '@angular/core'; // import { NavController } from 'ionic-angular'; // @Component({ // selector: 'page-home', // templateUrl: 'home.html' // }) // export class HomePage { // constructor(public navCtrl: NavController) { // } // } import { Component } from '@angular/core'; import { NavController, AlertController, Platform } from 'ionic-angular'; import { Checklist } from '../checklist/checklist'; import { ChecklistModel } from '../../models/checklist-model'; import { Data } from '../../providers/data'; import { Keyboard } from 'ionic-native'; @Component({ selector: 'page-home', templateUrl: 'home.html', }) export class HomePage { checklists: ChecklistModel[] = []; constructor(public navCtrl: NavController, public dataService: Data, public alertCtrl: AlertController, public platform: Platform) { } // constructor(public navCtrl: NavController, public alertCtrl: AlertController, public platform: Platform) { // // this.checklists.push(new ChecklistModel("Noam", [1,2,3])); // } /////////////////////////////////////////////////////////////////////////////////////////////////////////// ionViewDidLoad() { } /////////////////////////////////////////////////////////////////////////////////////////////////////////// addChecklist(): void { let prompt = this.alertCtrl.create({ title: 'New Checklist', message: 'Enter the name of your new checklist below:', inputs: [ { name: 'name' } ], buttons: [ { text: 'Cancel' }, { text: 'Save', handler: data => { let newChecklist = new ChecklistModel(data.name, []); this.checklists.push(newChecklist); newChecklist.checklistUpdates().subscribe(update => { this.save(); }); this.save(); } } ] }); prompt.present(); } /////////////////////////////////////////////////////////////////////////////////////////////////////////// renameChecklist(checklist): void { let prompt = this.alertCtrl.create({ title: 'Rename Checklist', message: 'Enter the new name of this checklist below:', inputs: [ { name: 'name' } ], buttons: [ { text: 'Cancel' }, { text: 'Save', handler: data => { let index = this.checklists.indexOf(checklist); if (index > -1) { this.checklists[index].setTitle(data.name); this.save(); } } } ] }); prompt.present(); } /////////////////////////////////////////////////////////////////////////////////////////////////////////// viewChecklist(checklist): void { this.navCtrl.push(Checklist, { checklist: checklist }); } /////////////////////////////////////////////////////////////////////////////////////////////////////////// removeChecklist(checklist): void { let index = this.checklists.indexOf(checklist); if (index > -1) { this.checklists.splice(index, 1); this.save(); } } /////////////////////////////////////////////////////////////////////////////////////////////////////////// save(): void { Keyboard.close(); this.dataService.save(this.checklists); } /////////////////////////////////////////////////////////////////////////////////////////////////////////// } 

El método que se supone debe llamarse y usar el Almacenamiento es save() HomePage.

No puedo llegar tan lejos, sin embargo, porque incluso antes de que la página se cargue, obtengo

Runtime Error Uncaught (en promise): Error: ¡Sin proveedor para Storage! Error en g ( http: // localhost: 8100 / build / polyfills.js: 3: 7133 ) en injectionError ( http: // localhost: 8100 / build / main.js: 1585: 86 ) en noProviderError ( http: // localhost: 8100 / build / main.js: 1623: 12 ) en ReflectiveInjector_. throwOrNull ( http: // localhost: 8100 / build / main.js: 3125: 19 ) en ReflectiveInjector . getByKeyDefault ( http: // localhost: 8100 / build / main.js: 3164: 25 ) en ReflectiveInjector . getByKey ( http: // localhost: 8100 / build / main.js: 3096: 25 ) en ReflectiveInjector .get ( http: // localhost: 8100 / build / main.js: 2965: 21 ) en AppModuleInjector.get (ng: ///AppModule/module.ngfactory.js:254:82) en AppModuleInjector.getInternal (ng: ///AppModule/module.ngfactory.js: 481: 44) en AppModuleInjector.NgModuleInjector.get ( http: // localhost: 8100 / build / main.js: 3929: 44 ) en resolveDep ( http: // localhost: 8100 / build / main.js: 11334: 45 ) en createClass ( http: // localhost: 8100 / build / main.js: 11202: 32 ) en createDirectiveInstance ( http: // localhost: 8100 / build / main.js: 11028: 37 ) en createViewNodes ( http: // localhost: 8100 / build / main.js: 12377: 49 ) en createRootView ( http : // localhost: 8100 / build / main.js: 12282: 5 )

Package.json:

 { "name": "ionic-hello-world", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "config": { "ionic_source_map": "source-map" }, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/common": "4.0.0", "@angular/compiler": "4.0.0", "@angular/compiler-cli": "4.0.0", "@angular/core": "4.0.0", "@angular/forms": "4.0.0", "@angular/http": "4.0.0", "@angular/platform-browser": "4.0.0", "@angular/platform-browser-dynamic": "4.0.0", "@ionic-native/core": "3.4.2", "@ionic-native/splash-screen": "3.4.2", "@ionic-native/status-bar": "3.4.2", "@ionic/storage": "^2.0.1", "ionic-angular": "3.0.1", "ionic-native": "^2.9.0", "ionicons": "3.0.0", "rxjs": "5.1.1", "sw-toolbox": "3.4.0", "zone.js": "^0.8.4" }, "devDependencies": { "@ionic/app-scripts": "1.3.0", "typescript": "~2.2.1", "webpack": "^2.4.1" }, "cordovaPlugins": [ "cordova-plugin-whitelist", "cordova-plugin-console", "cordova-plugin-statusbar", "cordova-plugin-device", "cordova-plugin-splashscreen", "ionic-plugin-keyboard" ], "cordovaPlatforms": [], "description": "quicklists: An Ionic project" } 

Como hice todo lo que dijo el doctor, por favor, ilumíname: lo que aún falta que podría causar que no se encuentre el almacenamiento

Gracias

En primer lugar, debe instalar: npm install --save @ionic/storage

El problema era

en aplicaciones

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

Capital 'S' en lugar de capital no 's'

 from '@ionic/Storage' 

en lugar de

 from '@ionic/storage' 

No tengo idea de por qué el comstackdor no captaría eso si es un problema, pero no fue así.

Gracias a @chairmanmow

primero haz esta installation npm –save @ ionic / storage

Logré hacer que esto funcionara usando esto …

Dentro de app.module.ts

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

Y entonces …

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

Y luego en mi page.ts

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

En el constructor …

 public storage: Storage 

Y luego dentro de las entrañas de mi código …

 this.storage.get('date').then((value) => { // blah }); 

En mi caso, olvidé agregar lo siguiente en app.module.ts

import { IonicStorageModule } from '@ionic/storage';
@NgModul({ ..., Imports: [ ... IonicStorageModule.forRoot() ],

 Please use this plugin for native storage ionic cordova plugin add cordova-plugin-nativestorage npm install --save @ionic-native/native-storage 

e importar app.module.ts

 import { NativeStorage } from '@ionic-native/native-storage'; providers: [ StatusBar, SplashScreen, NativeStorage, LocalStorageProvider, {provide: ErrorHandler, useClass: IonicErrorHandler} ] 

Ingresa el código aquí