Ionic2 Error: "No provider for Storage"

Question

After reading everything I could find, and failing, I must ask here:

I am trying to use ionic2's Storage, just like the doc tells me to,

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

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

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

The method that is supposed to get called and use the Storage is HomePage's save().

I can't get that far, however, because before the page even loads, I get

Runtime Error Uncaught (in promise): Error: No provider for Storage! Error at g (http://localhost:8100/build/polyfills.js:3:7133) at injectionError (http://localhost:8100/build/main.js:1585:86) at noProviderError (http://localhost:8100/build/main.js:1623:12) at ReflectiveInjector_.throwOrNull (http://localhost:8100/build/main.js:3125:19) at ReflectiveInjector.getByKeyDefault (http://localhost:8100/build/main.js:3164:25) at ReflectiveInjector.getByKey (http://localhost:8100/build/main.js:3096:25) at ReflectiveInjector.get (http://localhost:8100/build/main.js:2965:21) at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:254:82) at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:481:44) at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3929:44) at resolveDep (http://localhost:8100/build/main.js:11334:45) at createClass (http://localhost:8100/build/main.js:11202:32) at createDirectiveInstance (http://localhost:8100/build/main.js:11028:37) at createViewNodes (http://localhost:8100/build/main.js:12377:49) at 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" } 

Since I did everything the doc said, please enlighten me - What is still missing that would cause the Storage not to be found

Thanks

Answer 1

EDIT

This answer used to get a lot of upvotes, and that stopped.

I can only assume this is due to version updates/bug fixes.

I suggest you update your angular before going forward with this solution.

---

Firstly you need to install: npm install --save @ionic/storage

The problem was in app.ts:

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

Capital 'S' instead of non capital 's':

from '@ionic/Storage' 

instead of:

from '@ionic/storage' 

No idea why the compiler wouldn't catch that if it's a problem, but it didn't.

Thanks to @chairmanmow