Erreur Ionic2: "Aucun fournisseur pour le stockage"

Après avoir lu tout ce que j'ai pu trouver, et à défaut, je dois demander ici:

Je suis en train d'utiliser ionic2 de Stockage, tout comme le doc me dit,

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

voici mon Code:

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

la maison.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);
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////
}

La méthode qui est censé être appelé et utiliser l'espace de Stockage est de la page d'Accueil save().

Je ne peux pas en arriver là, cependant, parce que, avant même charge, je reçois

Runtime Erreur non Interceptée (promesse): Erreur: Pas de fournisseur pour le Stockage!
Erreur à g (http://localhost:8100/build/polyfills.js:3:7133) à
injectionError (http://localhost:8100/build/main.js:1585:86) à
noProviderError (http://localhost:8100/build/main.js:1623:12) à
ReflectiveInjector_.throwOrNull
(http://localhost:8100/build/main.js:3125:19) à
ReflectiveInjector.getByKeyDefault
(http://localhost:8100/build/main.js:3164:25) à
ReflectiveInjector.getByKey
(http://localhost:8100/build/main.js:3096:25) à
ReflectiveInjector.get (http://localhost:8100/build/main.js:2965:21)
au AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:254:82)
au AppModuleInjector.getInternal
(ng:///AppModule/module.ngfactory.js:481:44)
AppModuleInjector.NgModuleInjector.obtenez de l'
(http://localhost:8100/build/main.js:3929:44) à resolveDep
(http://localhost:8100/build/main.js:11334:45) à createClass
(http://localhost:8100/build/main.js:11202:32) à
createDirectiveInstance (http://localhost:8100/build/main.js:11028:37)
au createViewNodes (http://localhost:8100/build/main.js:12377:49) à
createRootView (http://localhost:8100/build/main.js:12282:5)

Paquet.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"
}

Depuis que j'ai fait tout ce que le doc a dit, merci de m'éclairer - Ce qui manque encore qui provoque le Stockage ne pas être trouvé

Grâce

source d'informationauteur Gulzar