title: Ionic2 Error: "No provider for Storage"
body: <p>After reading everything I could find, and failing, I must ask here:</p>
  
  <p>I am trying to use ionic2's Storage, just like the doc tells me to,</p>
  
  <p>doc: <a href="https://ionicframework.com/docs/storage/" rel="noreferrer">https://ionicframework.com/docs/storage/</a></p>
  
  <p>here is my Code:</p>
  
  <p>app-module.ts</p>
  
  <pre><code>    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&lt;any&gt; {
      return this.storage.get('checklists');
    }
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    save(data): void {
      let saveData = [];
      //Remove observables
      data.forEach((checklist) =&gt; {
        saveData.push({
          title: checklist.title,
          items: checklist.items
        });
      });
      let newData = JSON.stringify(saveData);
      this.storage.set('checklists', newData);
    }
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  }
  </code></pre>
  
  <p>home.ts</p>
  
  <pre><code>// 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 =&gt; {
              let newChecklist = new ChecklistModel(data.name, []);
              this.checklists.push(newChecklist);
              newChecklist.checklistUpdates().subscribe(update =&gt; {
                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 =&gt; {
              let index = this.checklists.indexOf(checklist);
              if (index &gt; -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 &gt; -1) {
        this.checklists.splice(index, 1);
        this.save();
      }
    }
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////
    save(): void {
      Keyboard.close();
      this.dataService.save(this.checklists);
    }
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////
  }
  </code></pre>
  
  <p>The method that is supposed to get called and use the Storage is HomePage's <code>save()</code>.</p>
  
  <p>I can't get that far, however, because before the page even loads, I get </p>
  
  <blockquote>
    <p>Runtime Error Uncaught (in promise): Error: No provider for Storage!
    Error at g (<a href="http://localhost:8100/build/polyfills.js:3:7133" rel="noreferrer">http://localhost:8100/build/polyfills.js:3:7133</a>) at
    injectionError (<a href="http://localhost:8100/build/main.js:1585:86" rel="noreferrer">http://localhost:8100/build/main.js:1585:86</a>) at
    noProviderError (<a href="http://localhost:8100/build/main.js:1623:12" rel="noreferrer">http://localhost:8100/build/main.js:1623:12</a>) at
    ReflectiveInjector_.<em>throwOrNull
    (<a href="http://localhost:8100/build/main.js:3125:19" rel="noreferrer">http://localhost:8100/build/main.js:3125:19</a>) at
    ReflectiveInjector</em>.<em>getByKeyDefault
    (<a href="http://localhost:8100/build/main.js:3164:25" rel="noreferrer">http://localhost:8100/build/main.js:3164:25</a>) at
    ReflectiveInjector</em>.<em>getByKey
    (<a href="http://localhost:8100/build/main.js:3096:25" rel="noreferrer">http://localhost:8100/build/main.js:3096:25</a>) at
    ReflectiveInjector</em>.get (<a href="http://localhost:8100/build/main.js:2965:21" rel="noreferrer">http://localhost:8100/build/main.js:2965:21</a>)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:254:82)
    at AppModuleInjector.getInternal
    (ng:///AppModule/module.ngfactory.js:481:44) at
    AppModuleInjector.NgModuleInjector.get
    (<a href="http://localhost:8100/build/main.js:3929:44" rel="noreferrer">http://localhost:8100/build/main.js:3929:44</a>) at resolveDep
    (<a href="http://localhost:8100/build/main.js:11334:45" rel="noreferrer">http://localhost:8100/build/main.js:11334:45</a>) at createClass
    (<a href="http://localhost:8100/build/main.js:11202:32" rel="noreferrer">http://localhost:8100/build/main.js:11202:32</a>) at
    createDirectiveInstance (<a href="http://localhost:8100/build/main.js:11028:37" rel="noreferrer">http://localhost:8100/build/main.js:11028:37</a>)
    at createViewNodes (<a href="http://localhost:8100/build/main.js:12377:49" rel="noreferrer">http://localhost:8100/build/main.js:12377:49</a>) at
    createRootView (<a href="http://localhost:8100/build/main.js:12282:5" rel="noreferrer">http://localhost:8100/build/main.js:12282:5</a>)</p>
  </blockquote>
  
  <p>Package.json:</p>
  
  <pre><code>{
    "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"
  }
  </code></pre>
  
  <p>Since I did everything the doc said, please enlighten me - What is still missing that would cause the Storage not to be found</p>
  
  <p>Thanks</p>