没有 Http 的提供程序 StaticInjectorError。

Question

我正在尝试从我的api中提取数据，并将其填充到我的ionic应用程序中，但当我进入页面应填充数据时，它会崩溃。以下是我的两个.ts文件：

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)

我不确定为什么会出现“无提供者”错误，因为这是通过ionic框架创建的提供者

- Drew

Answer 1

为了在你的应用中使用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现在已过时，请使用import { HttpClientModule } from '@angular/common/http'；确保在imports:[]数组中添加HttpClientModule。

- Sajeetharan

---

我已将此添加到app.module.ts文件中，但现在出现错误：Cannot find name 'IonicStorageModule'。 - Drew

你需要执行导入操作 import { IonicStorageModule } from '@ionic/storage'; 这只是一个示例，如果不需要可以删除。 - Sajeetharan

我之前有加那个，但是当我把它移除后，它就可以运行了。谢谢！ - Drew

HttpModule 现在已经被弃用了，应该使用 import { HttpClientModule } from '@angular/common/http'; 代替，并且在你的 imports:[] 数组中确保名称为 HttpClientModule。 - Александр Фишер

杰出的答案 - Aayush Gupta

Answer 2

更新：Angular v6+

对于从旧版本（Angular v2-v5）转换的应用程序：HttpModule现已弃用，您需要将其替换为HttpClientModule，否则会出现错误。

1. 在app.module.ts中，使用新的HttpClientModule代替旧的HttpModule：import { HttpClientModule } from "@angular/common/http"; 注意：确保通过删除旧的HttpModule并将其替换为新的HttpClientModule来更新模块的imports[]数组。
2. 在任何使用了HttpModule的服务中，使用新的HttpClient代替：import { HttpClient } from '@angular/common/http';

3. 更新如何处理Http响应。例如-如果您的代码看起来像这样：

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

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

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

有关更多信息，请参见-

Angular HttpClientModule - 官方文档

- Narm

---

出现错误 NullInjectorError: No provider for HttpClient! - Nitin Sawant

Answer 3

您还需要从 Angular 的 '@angular/common/http' 中导入 HttpClientModule 到您的主要 AppModule，以便进行 HTTP 请求。 app.module.ts

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

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

- Gunjan Kumar

Answer 4

请将这两个文件添加到您的app.module.ts中。

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

在此之后，在提供程序中声明这些内容。

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

这对我来说是一项工作。

- Rajiv Pandey

---

请您将代码块标记为代码块，方法是选择它们并单击编辑工具栏中的“{}``图标。谢谢！ :) - smheidrich

Answer 5

我正在进行一个使用tsconfig.json通过源代码包含连接不同代码集合的angular项目（不幸的是）。我遇到了一个类似的StaticInjector错误，针对一个服务（例如顶部示例中的RestService），我能够通过在模块中提供受影响的服务时列出服务依赖项来修复它，例如：

{ provide: RestService, useClass: RestServiceImpl, deps: [Http] }

"deps"数组列出了RestServiceImpl所依赖的Http服务。

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 */
    },
  ]
  ...

- tedw

---

好的！您能否解释一下“通过tsconfig.json进行源代码包含”的意思？ - Harkal

Answer 6

在ionic 4.6中，我使用以下技术并且它有效。我添加这个答案是为了帮助任何遇到类似问题的人在更新的ionic版本应用程序中解决问题。

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

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

ii) 在 @NgModule 的 import 部分添加以下行：

HttpModule,
HttpClientModule,

所以，在我的情况下，@NgModule 看起来像这样：

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

就是这样！

- Phan Hero

Answer 7

我试图解决这个问题大约一个小时，最后决定重新启动服务器。结果发现问题已经被解决了。

如果您对APP模块进行更改，问题仍然存在，请停止服务器并尝试再次运行serve命令。

使用ionic 4和angular 7

- Lasithds