[英]Ionic2 Error: "No provider for Storage"
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,我正在尝试使用 ionic2 的存储,就像文档告诉我的那样,
doc: https://ionicframework.com/docs/storage/文档: https://ionicframework.com/docs/storage/
here is my Code:这是我的代码:
app-module.ts应用模块.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主页.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()
.应该调用和使用存储的方法是 HomePage 的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_.运行时错误未捕获(承诺):错误:在 injectionError ( http ://localhost:8100/build/main .js:1585:86 ) 在 ReflectiveInjector_ 的 noProviderError ( http://localhost:8100/build/main.js:1623:12 )。 throwOrNull ( http://localhost:8100/build/main.js:3125:19 ) at ReflectiveInjector .在 ReflectiveInjector 的 throwOrNull ( http://localhost:8100/build/main.js:3125:19 ) 。 getByKeyDefault ( http://localhost:8100/build/main.js:3164:25 ) at ReflectiveInjector .在 ReflectiveInjector 的 getByKeyDefault ( http://localhost:8100/build/main.js:3164:25 ) 。 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 ) GetByKey ( http://localhost:8100/build/main.js:3096:25 ) 在 ReflectiveInjector .get ( http://localhost:8100/build/main.js:2965:21 ng) 在 App.ModuleInject: ///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/ 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: 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谢谢
Firstly you need to install: npm install --save @ionic/storage
首先你需要安装: npm install --save @ionic/storage
The problem was in app.ts:问题出在 app.ts 中:
import {IonicStorageModule} from '@ionic/Storage';
Capital 'S' instead of non capital 's':大写“S”而不是非大写“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感谢@chairmanmow
In my case, I forgot to add the following in app.module.ts就我而言,我忘记在 app.module.ts 中添加以下内容
import { IonicStorageModule } from '@ionic/storage';
@NgModul({
...,
Imports: [
...
IonicStorageModule.forRoot()
],
first do this npm install --save @ionic/storage首先做这个 npm install --save @ionic/storage
I managed to get this working using this ..我设法使用这个来让它工作..
Inside app.module.ts
在app.module.ts
里面
import { Storage } from '@ionic/storage';
And then ...进而 ...
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, Storage]
And then in my page.ts
然后在我的page.ts
import { Storage } from '@ionic/storage';
In the constructor ...在构造函数中...
public storage: Storage
And then within the guts of my code ..然后在我的代码中..
this.storage.get('date').then((value) => {
// blah
});
Please use this plugin for native storage
ionic cordova plugin add cordova-plugin-nativestorage
npm install --save @ionic-native/native-storage
and import app.module.ts 并导入app.module.ts
import { NativeStorage } from '@ionic-native/native-storage';
providers: [
StatusBar,
SplashScreen,
NativeStorage,
LocalStorageProvider,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
enter code here 在此处输入代码
I had the same issue.我遇到过同样的问题。 I added this to app.module.ts
:我将此添加到app.module.ts
:
import { IonicStorageModule } from '@ionic/storage';
And, this to imports parts of the app.module.ts
:并且,这将导入app.module.ts
部分app.module.ts
:
IonicStorageModule.forRoot(),
2021 Ionic Storage v3 Angular: 2021 离子存储 v3 Angular:
import { IonicStorageModule } from '@ionic/storage-angular';
IonicStorageModule.forRoot(),
I had the same problem.我有同样的问题。 Please make sure that you remember to add the main module in your app.module.ts
file请确保您记得在app.module.ts
文件中添加主模块
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
...,
Imports: [
...
IonicStorageModule.forRoot()
],
....
})
And also make sure that you are actually importing the actual Storage
from @ionic/storage-angular
.还要确保您实际上是从@ionic/storage-angular
导入实际的Storage
。
constructor(private storage: Storage) { }
The above will seem fine and not show any errors even if you dont include上面的内容看起来不错,即使您不包含也不会显示任何错误
import { Storage } from '@ionic/storage-angular'
at the top of your file.在文件的顶部。 I presume that is because of the native Storage
available on the global window
object.我认为这是因为全局window
对象上可用的本机Storage
。
The injection as explained in the doc ( https://github.com/ionic-team/ionic-storage ), works well;文档中解释的注入( https://github.com/ionic-team/ionic-storage )效果很好;
I first missed this information: "this approach is meant for usage in a single component ", so, using it for both AppComponent and HomePage I did get this error, exactly.我首先错过了这个信息:“这种方法适用于单个组件”,因此,将它用于 AppComponent 和 HomePage 我确实得到了这个错误。
I restored app.component.ts in its previous state, and all is fine now.我在之前的 state 中恢复了 app.component.ts,现在一切正常。 (works on ionic 6.20.1) (适用于离子 6.20.1)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.