没有 Http StaticInjectorError 的提供程序

我试图从我的 api 中提取数据，并将其填充到我的离子应用程序中，但是当我进入应该填充数据的页面时，它崩溃了。下面是我的两个。文件:

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


import { NavController, LoadingController } from 'ionic-angular';
import { RestService } from '../../providers/rest-service/rest-service';


@Component({
selector: 'page-all-patients',
templateUrl: 'all-patients.html',
providers: [RestService]
})
export class AllPatientsPage {
data: any;
loading: any;


constructor(public navCtrl: NavController, public restService: RestService, public loadingCtrl: LoadingController) {


this.loading = this.loadingCtrl.create({
content: `
<ion-spinner></ion-spinner>`
});
this.getdata();
}


getdata() {
this.loading.present();
this.restService.getJsonData().subscribe(
result => {
this.data=result.data.children;
console.log("Success: " + this.data);
},
err => {
console.error("Error : " + err);
},
() => {
this.loading.dismiss();
console.log('getData completed');
}
);
}
}

还有另一个文件:

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';


/*
Generated class for the RestServiceProvider provider.


See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/


@Injectable()
export class RestService {


constructor(public http: Http) {
console.log('Hello RestServiceProvider Provider');
}


getJsonData() {
// return Promise.resolve(this.data);


return this.http.get('url').map(res => res.json());
}


}

我也尝试过使用 HttpModule，但这是一个致命的错误:

Error: Uncaught (in promise): Error: StaticInjectorError[Http]:
StaticInjectorError[Http]:
NullInjectorError: No provider for Http!
Error: StaticInjectorError[Http]:
StaticInjectorError[Http]:
NullInjectorError: No provider for Http!
at _NullInjector.get (http://lndapp.wpi.edu:8100/build/vendor.js:1276:19)

我不确定为什么没有提供者错误，因为这是通过离子框架创建的提供者

197650 次浏览
小开
最佳答案

为了在应用程序中使用 Http，你需要将 HttpModule 添加到 app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
...
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
]

剪辑

正如下面的评论中提到的，HttpModule现在是 deprecated，使用 import { HttpClientModule } from '@angular/common/http'; 确保 HttpClientModule在您的 imports:[]数组中

小开

更新: Angular v6 +

对于从旧版本(Angular v2-v5)转换过来的应用程序: HttpModule 现在已经不被推荐使用，您需要用 HttpClientModule 替换它，否则您也会得到这个错误。

  1. 在 应用程序模块中，用新的 HttpClientModule import { HttpClientModule} from "@angular/common/http";注意: 一定要通过删除旧的 ABC3并用新的 ABC4替换它来更新模块 imports[]阵列。替换 import { HttpModule } from '@angular/http';
  2. 在使用 HttpModule 替换的任何服务中 带有新的 HttpClient import { HttpClient } from '@angular/common/http';的 import { Http } from '@angular/http';

  3. 更新你如何处理你的 Http 响应。例如-如果你有这样的代码

    http.get('people.json').subscribe((res:Response) => this.people = res.json());

上面的代码示例将导致错误。我们不再需要解析响应，因为它已经在 config 对象中以 JSON 的形式返回。

订阅回调将数据字段复制到组件的配置对象中，该对象在用于显示的组件模板中是数据绑定的。

有关详细信息，请参阅- 正式文件

小开

在 app.module.ts中添加这两个文件

import { FileTransfer } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';

在此之后，声明这些到提供程序. 。

providers: [
Api,
Items,
User,
Camera,
File,
FileTransfer];

这是我的工作。

小开

您还需要将 HttpClientModule从角 '@angular/common/http'导入到您的主 AppModule 中，以便发出 HTTP 请求。

应用程序模块

import { HttpClientModule } from '@angular/common/http';
import { ServiceService } from '../../../services/service.service';


@NgModule({
imports: [
HttpClientModule
],
providers: [
ServiceService
]
})
export class AppModule {...}
小开

在 ionic 4.6中，我使用了以下技术，并且成功了。我添加这个答案，以便如果有人面临类似的问题，在新的离子版本的应用程序，它可能会帮助他们。

I)打开 app.module.ts 并添加以下代码块以导入 HttpModule 和 HttpClientModule

import { HttpModule } from '@angular/http';
import {   HttpClientModule } from '@angular/common/http';

Ii)在@NgModule 导入部分添加以下行:

HttpModule,
HttpClientModule,

所以，在我的案例中@NgModule 看起来像这样:

@NgModule({
declarations: [AppComponent ],
entryComponents: [ ],
imports: [
BrowserModule,
HttpModule,
HttpClientModule,
IonicModule.forRoot(),
AppRoutingModule,
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})

就是这样！

小开

我在一个有角度的项目，(不幸的)使用源代码包含通过 tsconfig.json连接不同的代码集合。我遇到了一个服务的类似 StaticInjector错误(例如上例中的 RestService) ，我能够通过在模块中提供受影响的服务时列出 deps数组中的服务依赖项来修复它，例如:

import { HttpClient } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RestService } from 'mylib/src/rest/rest.service';
...
@NgModule({
imports: [
...
HttpModule,
...
],
providers: [
{
provide: RestService,
useClass: RestService,
deps: [HttpClient] /* the injected services in the constructor for RestService */
},
]
...
小开

我试图解决这个问题大约一个小时，刚刚决定对 重新开始的服务器。只是看到问题已经解决了。

如果对 APP 模块进行更改，并且问题仍然相同，则 停止服务器并再次尝试运行 service 命令。

用离子4和角7


提交答案