Angular 4 和 Ionic 3 没有 HTTP 提供者答案

【问题标题】：Angular 4 and Ionic 3 No provider for HTTPAngular 4 和 Ionic 3 没有 HTTP 提供者
【发布时间】：2018-06-10 01:50:54
【问题描述】：

我有一个导入 Http 的服务，当我在我的应用程序中使用它时，它会引发错误。 “没有 Http 提供程序！g injectionError 时出错”。我正在延迟加载应用程序。此外，提供程序是通过 cli "ionic g provider ..."

生成的

complaint-service.ts

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

@Injectable()
export class ComplaintService {
    private complaints: {subject: string, description: string}[] = [];

    constructor(public http: Http) {
        this.http = http;
        this.complaints = null;
        console.log('Hello ComplaintService Provider');
    }

    addComplaints(complaint: {subject: string, description: string}) {
        this.complaints.push(complaint);
    }

    getComplaints() {
        return this.complaints.slice();
    }

}

complaint-form.ts

import { Component } from '@angular/core';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {ComplaintService} from '../../providers/complaint-service';


@IonicPage()
@Component({
  selector: 'page-complaint-form',
  templateUrl: 'complaint-form.html',
  providers: [ComplaintService]
})
export class ComplaintForm {

}

有什么建议吗？

【问题讨论】：

你必须在你的模块中注册Http到providers
@devqon - 我们在延迟加载时也需要它吗？
请注意 Angular 的 Http 与 Ionic 原生插件的 HTTP 之间的区别。如果为后者获得no provider error，请将HTTP - 可以从ionic-native导入 - 包含到您的app.module.ts中。

标签： angular ionic3

【解决方案1】：

您必须将HttpModule 注册到您的模块（/app.module.ts）：

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

@NgModule({
  imports: [
    HttpModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
}

【讨论】：

在定义你的应用模块类的ts文件中
我将此代码添加到我的项目中：testIonic/src/app/app.module.ts 并且它可以工作:)
在使用 angular-cli 构建的应用中，将此代码放在顶层文件夹的 app.module.ts 中。

【解决方案2】：

也将HTTP 添加到提供者列表中。（致AppModule）

import { HTTP } from '@ionic-native/http';

和

  providers: [
    ...,
    HTTP 
  ]

使用 Angulat5+、Ionic 3+

【讨论】：

【解决方案3】：

HttpModule 在 ionic3 和 Angular5 的最新版本中已弃用。所以，你必须使用 HttpClientModule 而不是 HttpModule。其他事情将与@devqon 的回答相同。之后，您可以在服务或组件文件中使用 HttpClient。

更多信息请参考Angular原文档。

https://angular.io/guide/http

import {HttpClientModule} from "@angular/common/http";

@NgModule({
  imports: [
    HttpClientModule
 ],
 declarations: [ AppComponent ],
 bootstrap:    [ AppComponent ]
})
export class AppModule {
}

【讨论】：

【解决方案4】：

import {HttpClientModule} from "@angular/common/http";

@NgModule({
  declarations: [
    ChatPage,
  ],
  imports: [
    IonicPageModule.forChild(ChatPage),
    HttpModule,
    HttpClientModule,// add HttpClientModule to import
    SocketIoModule.forRoot(config)
  ],

})

不要忘记使用 ionic cordova run browser，因为您需要一个平台来运行 cordova 插件

【讨论】：