Ionic2 错误：“没有存储提供程序”
Posted
技术标签:
【中文标题】Ionic2 错误：“没有存储提供程序”【英文标题】：Ionic2 Error: "No provider for Storage" 【发布时间】：2017-09-13 14:30:24 【问题描述】：在阅读了我能找到的所有内容并且失败后，我必须在这里问：
我正在尝试使用 ionic2 的存储，就像文档告诉我的那样，
文档：https://ionicframework.com/docs/storage/
这是我的代码：
应用模块.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) 处出错 injectionError (http://localhost:8100/build/main.js:1585:86) 在 noProviderError (http://localhost:8100/build/main.js:1623:12) 在 ReflectiveInjector_.throwOrNull (http://localhost:8100/build/main.js:3125:19) 在 ReflectiveInjector.getByKeyDefault (http://localhost:8100/build/main.js:3164:25) 在 ReflectiveInjector.getByKey (http://localhost:8100/build/main.js:3096:25) 在 ReflectiveInjector.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) 在 createDirectiveInstance (http://localhost:8100/build/main.js:11028:37) 在 createViewNodes (http://localhost:8100/build/main.js:12377:49) 在 createRootView (http://localhost:8100/build/main.js:12282:5)
包.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"
既然我做了文档所说的一切，请赐教 - 仍然缺少什么会导致找不到存储
谢谢
【问题讨论】：
在您的应用程序模块中，您是否尝试将导入语句中的 IonicStorageModule(forRoot) 移动到提供程序数组？似乎该错误很难指向该方向。不确定您是否需要 forRoot 部分，但我会尝试将其移出导入数组并移至提供程序数组。很确定这就是需要注射的地方。 @chairmanmow ***.com/questions/42788623/… 在这里它告诉我做我所做的，而且文档ionicframework.com/docs/storage 声明它属于进口 嗯，是的，我猜你是按照说明操作的。我确实注意到可能涉及的一件事，我注意到您正在从 '@ionic/storage' 导入 'import Storage ;'一个地方，你的导入 import Storage from '@ionic/Storage';... 请注意，其中一个中的 S 大写。无论如何，不确定我能提供多少帮助，但也许这是一个错字。 【参考方案1】：首先需要安装：npm install --save @ionic/storage
问题出在 app.ts 中：
import IonicStorageModule from '@ionic/Storage';
大写“S”而不是非大写“s”：
from '@ionic/Storage'
代替：
from '@ionic/storage'
不知道为什么编译器不会发现问题，但它没有。
感谢@chairmanmow
编辑
这个答案曾经得到很多支持，但后来停止了。
我只能假设这是由于版本更新/错误修复。
我建议您在继续使用此解决方案之前更新您的角度。
【讨论】：
github.com/ionic-team/ionic-storage/releases/tag/v2.0.0 运行 npm install @ionic/storage@2.0.0 --save --save-exact 从 app.module.ts 中的提供程序中删除存储 import IonicStorageModule from '@ionic/ storage' 而不是 import IonicStorage from '@ionic/storage' in app.module.ts 将 IonicStorageModule.forRoot() 添加到 app.module.ts 中的 imports 数组 对我来说，它很小s 。它需要与您的package.json 中的相同。【参考方案2】：
我遇到了同样的问题。请确保您记得在 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。
【讨论】：
【参考方案3】：2021 离子存储 v3 角度：
import IonicStorageModule from '@ionic/storage-angular';
IonicStorageModule.forRoot(),
【讨论】：
【参考方案4】：我有同样的问题。我将此添加到app.module.ts：
import IonicStorageModule from '@ionic/storage';
而且，这将导入 app.module.ts 的部分内容：
IonicStorageModule.forRoot(),
【讨论】：
【参考方案5】：就我而言，我忘记在 app.module.ts 中添加以下内容
import IonicStorageModule from '@ionic/storage';
@NgModul(
...,
Imports: [
...
IonicStorageModule.forRoot()
],
【讨论】：
【参考方案6】：首先执行此操作 npm install --save @ionic/storage
我设法使用这个..
内部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 文件的providers: 添加Storage ，它给出了Uncought error。就我而言，我忘记在page.ts 组件页面添加import Storage from '@ionic/storage';。谢谢@Chris。以上是关于Ionic2 错误：“没有存储提供程序”的主要内容，如果未能解决你的问题，请参考以下文章
Django rest 框架，Django 通道，Ionic2 - websocket 握手错误
ionic2：浏览器中的地理定位失败并出现错误：异常：未捕获（承诺中）：错误