Ionic 2 运行时错误没有提供程序答案

【问题标题】：Ionic 2 Runtime Error No PorviderIonic 2 运行时错误没有提供程序
【发布时间】：2017-06-12 09:30:37
【问题描述】：

我创建了一个名为 data-list.ts 的提供程序文件

将它包含在我的 app.moudule.ts 中

   import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { MyApp } from './app.component';
import { IonicStorageModule } from '@ionic/storage';
import { InfiniteScrollModule } from 'angular2-infinite-scroll';

import { LoginPage } from '../pages/login/login';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AuthServiceProvider } from '../providers/auth-service/auth-service';
import { JobsServiceProvider } from '../providers/jobs-service/jobs-service';
import { DataListProvider } from '../providers/data-list/data-list';


@NgModule({
  declarations: [
  MyApp,
  LoginPage,
  AboutPage,
  ContactPage,
  HomePage,
  TabsPage
  ],
  imports: [
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp),
  IonicStorageModule.forRoot(),
  InfiniteScrollModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
  MyApp,
  LoginPage,
  AboutPage,
  ContactPage,
  HomePage,
  TabsPage
  ],
  providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  JobsServiceProvider,
  DataListProvider 
  ]
})
export class AppModule {}

在我想要使用它的文件中（home.ts）并将其包含在我的构造函数中

import { DataListProvider } from '../../providers/data-list/data-list';

constructor(public navCtrl: NavController,public DataListProvider: DataListProvider) {}

但我不断收到此错误，我错过了什么：

MyApp_Host.html:1 ERROR 错误：DataListProvider 没有提供程序！在 injectionError (core.es5.js:1231) 在 noProviderError (core.es5.js:1269) 在 ReflectiveInjector_.throwOrNull (core.es5.js:2770) 在 ReflectiveInjector.getByKeyDefault (core.es5.js:2809) 在 ReflectiveInjector.getByKey (core.es5.js:2741) 在 ReflectiveInjector.get (core.es5.js:2610) 在 AppModuleInjector.NgModuleInjector.get (core.es5.js:3557) 在 resolveDep (core.es5.js:11017) 在 createClass (core.es5.js:10881) 在 createDirectiveInstance (core.es5.js:10701)

【问题讨论】：

您是否在服务类DataListProvider 中添加了@Injectable()？
是的，我已经添加了
请用您的DataListProvider.ts 代码再次更新问题

标签： angular cordova ionic2

【解决方案1】：

需要将provider添加到NgModule中，即providers下的module.ts，

providers: [
  DataListProvider
]

【讨论】：

正如您在我的问题中看到的那样，我已经在我的 ngModule 中添加了提供程序
对不起，我意识到我误解了，我添加了它，但我仍然得到同样的错误
你能再发一下module.ts里面的内容吗
把你的构造函数改成构造函数(public navCtrl: NavController,public dataListProvider: DataListProvider)
让我们continue this discussion in chat.

【解决方案2】：

您需要将 DataListProvider 添加到 app.moudule.ts 中的提供者列表中，如下所示：

 import { DataListProvider } from '../providers/data-list/data-list';

      providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
        JobsServiceProvider,
        DataListProvider 
      ]

【讨论】：

你可以尝试在你的home.js页面中添加这个provider @Component({ selector: '*****', templateUrl: '****', providers: [DataListProvider] } )

【解决方案3】：

首先，您需要将 'DataListProvider' 转换为可注入对象：

import {Injectable} from '@angular/core';

@Injectable()
export class DataListProvider() {
 // Content Service
}

然后将其导入到 app.module.ts 中的@NgModule 提供者列表中：

import {DataListProvider} from '../providers/data-list/data-list';

providers: [
 StatusBar,
 SplashScreen,
 {provide: ErrorHandler, useClass: IonicErrorHandler},
 JobsServiceProvider,
 DataListProvider 
]

如果这个方案不适合你，你可以尝试将 Home 组件转换成模块：

import {NgModule, ModuleWithProviders} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from '@angular/router';

import {Home} from './home';

@NgModule({
  imports: [CommonModule, RouterModule],
  declarations: [Home],
  exports: [Home]
})
export class HomeModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: HomeModule
    };
  }
}

并将该模块导入@NgModule：

import {HomeModule} from './home.module.ts';

@NgModule({
  declarations: [
  MyApp,
  LoginPage,
  AboutPage,
  ContactPage,
  TabsPage
  ],
  imports: [
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp),
  IonicStorageModule.forRoot(),
  InfiniteScrollModule,
  HomeModule.forRoot()  // -> New Module
  ],
  bootstrap: [IonicApp],
  entryComponents: [
  MyApp,
  LoginPage,
  AboutPage,
  ContactPage,
  TabsPage
  ],
  providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  JobsServiceProvider,
  DataListProvider 
  ]
})

希望对你有帮助！

【讨论】：