Ionic2 Lỗi: "Không có nhà cung cấp cho Storage"

Question

Sau khi đọc tất cả những gì tôi có thể tìm, nhưng thất bại, tôi phải hỏi ở đây:

Tôi cố gắng để sử dụng lưu trữ ionic2 của, giống như doc bảo tôi,

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

đây là Mã của tôi:

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

.210

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

Phương pháp đó là nghĩa vụ để gọi và sử dụng lưu trữ là Trang chủ của save().

tôi có thể không nhận được rằng đến nay, tuy nhiên, vì trước khi trang thậm chí tải, tôi nhận được

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

Kể từ khi tôi đã làm tất cả những gì doc cho biết, xin vui lòng khai sáng cho tôi - Những gì vẫn còn thiếu sẽ khiến cho Bộ nhớ không được tìm thấy

Cảm ơn

Answer 1

Trước hết bạn cần phải cài đặt: npm install --save @ionic/storage

Vấn đề là

trong ứng dụng.ts

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

Capital 'S' thay vì vốn không 's'

from '@ionic/Storage' 

istead của

from '@ionic/storage' 

Không có ý tưởng tại sao không trình biên dịch bắt rằng nếu đó là một vấn đề, nhưng không.

Nhờ @chairmanmow

Answer 2

đầu tiên làm NPM này cài đặt --save @ ion/lưu trữ

tôi quản lý để có được điều này làm việc sử dụng này ..

Bên app.module.ts

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

Và sau đó ...

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

Và sau đó trong page.ts

của tôi

Trong constructor ...

public storage: Storage 

Và sau đó trong ruột của mã của tôi ..

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

Answer 3

Please use this plugin for native storage   

ionic cordova plugin add cordova-plugin-nativestorage 
npm install --save @ionic-native/native-storage 

và nhập khẩu app.module.ts

import { NativeStorage } from '@ionic-native/native-storage'; 

    providers: [ 
    StatusBar, 
    SplashScreen, 
    NativeStorage, 
     LocalStorageProvider, 
    {provide: ErrorHandler, useClass: IonicErrorHandler} 

    ] 

enter code here

Answer 4

Trong trường hợp của tôi, tôi quên để thêm sau trong app.module .ts

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