Ionic2 错误："没有存储提供程序"

阅读了我能找到的所有内容，失败后，我必须在这里询问：

我正在尝试使用ionic2的存储，就像文档告诉我的那样，

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

这是我的代码：

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

应该被调用并使用存储的方法是主页的save()。

我无法走那么远，因为在页面甚至加载之前，我得到

运行时错误未被发现(在承诺中(：错误：无需存储提供商！ g(http：//localhost：8100/build/polyfills.js：3：7133(的错误 IndectionError(http：//localhost：8100/build/main.js：1585：86(at NoproviderError(http：//localhost：8100/build/main.js：1623：12(at 反射式注射器_。 throwornull (http：//localhost：8100/build/main.js：3125：19( RefletiveInjector 。 getByKeyDefault (http：//localhost：8100/build/main.js：3164：25( 反射式注射器。 getbykey (http：//localhost：8100/build/main.js：3096：25( 反射式注射器 .get(http：//localhost：8100/build/main.js：2965：21( 在AppModuleinjector.get(ng：///appmodule/module.ngfactory.js：254：82( 在AppModuleinjector.getInternal上 (ng：///appmodule/module.ngfactory.js：481：44( AppModuleInjector.ngmoduleinjector.get (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( CreatexationaltionStance(http：//localhost：8100/build/main.js：11028：37( 在CreateViewNodes(http：//localhost：8100/build/main.js：12377：49(at CreateOtView(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"
}

由于我做了文档所说的所有事情，请启发我 - 仍然缺少的是导致存储未找到的东西

谢谢

edit

这个答案用于获得大量的投票，并停止了。

我只能假设这是由于版本更新/错误修复。

我建议您在进行此解决方案之前更新您的角度。

首先您需要安装：npm install --save @ionic/storage

问题是在app.ts中：

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

Capital'S'而不是非资本'S'：

from '@ionic/Storage'

而不是：

from '@ionic/storage'

不知道为什么如果这是问题的话，为什么编译器不会抓住这一点，但没有。

感谢@chairmanmow

在我的情况下，我忘了在app.module.ts

中添加以下内容

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

首先执行此NPM安装-Save @ionic/storege

我设法使用了此工作。

内部app.module.ts

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

，然后...

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

，然后在我的page.ts

中

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

构造函数...

public storage: Storage

，然后在我的代码的胆量中。

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

我也有同样的问题。我将其添加到app.module.ts：

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

，这要进口app.module.ts的部分：

IonicStorageModule.forRoot(),

2021离子存储v3角：

import { IonicStorageModule } from '@ionic/storage-angular';
IonicStorageModule.forRoot(),

我也有同样的问题。请确保您记得在app.module.ts文件中添加主模块

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

，还要确保您实际上从@ionic/storage-angular导入实际的Storage。

constructor(private storage: Storage) { }

以上看起来还不错，即使您不包括

，也不会显示任何错误

import { Storage } from '@ionic/storage-angular'

在文件的顶部。我认为这是因为全局window对象上可用的本机Storage。

doc中解释的注入(https://github.com/ionic-team/ionic-storage(，效果很好；

我首先错过了此信息："此方法是针对单个组件＆quot;因此，将其用于AppComponent和主页，我确实遇到了此错误。

我以前状态恢复了app.component.ts，现在一切都很好。(在离子6.20.1上作品(

相关内容

最新更新

热门标签：