角度例外：没有 Http 提供者答案

【问题标题】：Angular EXCEPTION: No provider for Http角度例外：没有 Http 提供者
【发布时间】：2016-02-16 17:15:15
【问题描述】：

我在我的 Angular 应用程序中获得了 EXCEPTION: No provider for Http!。我做错了什么？

import {Http, Headers} from 'angular2/http';
import {Injectable} from 'angular2/core'


@Component({
    selector: 'greetings-ac-app2',
    providers: [],
    templateUrl: 'app/greetings-ac2.html',
    directives: [NgFor, NgModel, NgIf, FORM_DIRECTIVES],
    pipes: []
})
export class GreetingsAcApp2 {
    private str:any;

    constructor(http: Http) {

        this.str = {str:'test'};

        http.post('http://localhost:18937/account/registeruiduser/',
            JSON.stringify(this.str),
            {
                headers: new Headers({
                    'Content-Type': 'application/json'
                })
            });

【问题讨论】：

你不见了HTTP_PROVIDERS。
import/export... 请问各位，这是什么语法？
是打字稿语法
导入/导出 - 这是 JavaScript 语法 (ES6)
如果其中一个答案能够真正解释为什么我们需要导入HttpModule，以及它的作用，那就太好了。

标签： angular

【解决方案1】：

导入 HttpModule

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

理想情况下，您可以将此代码拆分为两个单独的文件。欲了解更多信息，请阅读：

【讨论】：

在当前的 Angular2 测试版中，该文件被称为 app.ts。
在angular-cli生成的项目中，文件名为main.ts。
如果我没有 NgModule 怎么办？我正在开发一个 angular2 模块，它没有 NgModule 但对于测试我需要 Http 提供程序
@Webruster 我刚刚检查过。它应该仍然有效。你能给我确切的错误代码吗？
@PhilipMiglinci ...感谢您提供宝贵的答案..为寻求者添加一些要点，即文件将是 app.module.ts 在角度 2.0 中的解释这是项目的核心文件，以包含将使用进一步继承的类的模块。

【解决方案2】：

>= Angular 4.3

为介绍HttpClientModule

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // if used
    HttpClientModule,
    JsonpModule // if used
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Angular2 >= RC.5

将HttpModule 导入到您使用它的模块（此处例如AppModule：

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // if used
    HttpModule,
    JsonpModule // if used
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

导入HttpModule 与在以前的版本中添加HTTP_PROVIDERS 非常相似。

【讨论】：

【解决方案3】：

在 2016 年 9 月 14 日发布的 Angular 2.0.0 中，您仍在使用 HttpModule。您的主要app.module.ts 看起来像这样：

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

@NgModule({
   bootstrap: [ AppComponent ],
   declarations: [ AppComponent ],
   imports: [
      BrowserModule,
      HttpModule,
      // ...more modules...
   ],
   providers: [
      // ...providers...
   ]
})
export class AppModule {}

然后在您的app.ts 中，您可以这样引导：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/main/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

【讨论】：

【解决方案4】：

在使用之前将 HttpModule 添加到 app.module.ts 文件中的导入数组中。

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

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

【讨论】：

【解决方案5】：

由于 rc.5 你必须做类似的事情

@NgModule({
    imports: [ BrowserModule],
    providers: [ HTTP_PROVIDERS ],  
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export default class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

【讨论】：

【解决方案6】：

因为只是在评论部分我重复了 Eric 的回答：

我必须包含HTTP_PROVIDERS

【讨论】：

... 另外，HTTP_PROVIDERS 已被贬值。它现在被称为 HttpModule.. stackoverflow.com/questions/38903607/…

【解决方案7】：

在您的 app.module.ts 文件中导入 HttpModule。

import { HttpModule } from '@angular/http';
import { YourHttpTestService } from '../services/httpTestService';

还记得在 import 下声明 HttpModule，如下所示：

imports: [
    BrowserModule,
    HttpModule
  ],

【讨论】：

【解决方案8】：

最好的方法是通过在 providers 数组中添加 Http 来更改组件的装饰器，如下所示。

@Component({
    selector: 'greetings-ac-app2',
    providers: [Http],
    templateUrl: 'app/greetings-ac2.html',
    directives: [NgFor, NgModel, NgIf, FORM_DIRECTIVES],
    pipes: []
})

【讨论】：

谁标错了，请问是什么原因？
我没有投反对票，但原因可能是您不希望每个组件都有一个新的 Http 对象。最好有一个应用程序，这是通过在NgModule 级别导入它来完成的。

【解决方案9】：

从 RC5 开始，您需要像这样导入 HttpModule：

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

然后将 HttpModule 包含在 Günter 上面提到的导入数组中。

【讨论】：

【解决方案10】：

只需包含以下库：

import { HttpModule } from '@angular/http';
import { YourHttpTestService } from '../services/httpTestService';

并在providers部分包含http类，如下：

@Component({
  selector: '...',
  templateUrl: './test.html',
  providers: [YourHttpTestService]

【讨论】：

【解决方案11】：

如果您在测试中遇到此错误，您应该为所有服务创建 Fake Service：

例如：

import { YourService1 } from '@services/your1.service';
import { YourService2 } from '@services/your2.service';

class FakeYour1Service {
 public getSomeData():any { return null; }
}

class FakeYour2Service {
  public getSomeData():any { return null; }
}

并且在每个之前：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    providers: [
      Your1Service,
      Your2Service,
      { provide: Your1Service, useClass: FakeYour1Service },
      { provide: Your2Service, useClass: FakeYour2Service }
    ]
  }).compileComponents();  // compile template and css
}));

【讨论】：

【解决方案12】：

**

简单的解决方案：在您的 app.module.ts
上导入 HttpModule 和 HttpClientModule

**

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



@NgModule({
 declarations: [
   AppComponent, videoComponent, tagDirective, 
 ],
 imports: [
  BrowserModule, routing, HttpClientModule, HttpModule

],
providers: [ApiServices],
bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：

此解决方案有效，但 HttpModule 在 Angular 5.2 中被标记为已弃用。我认为有些组件没有升级，仍然使用旧的 Http 实现。

【解决方案13】：

您需要做的就是在游览 app.module.ts 中包含以下库，并将其包含在您的导入中：

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

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

【讨论】：

【解决方案14】：

我在代码中遇到了这个问题。我只把这段代码放在我的 app.module.ts 中。

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

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

【讨论】：

请不要重复已有的答案。这样做不会为社区增加价值。

【解决方案15】：

import { HttpModule } from '@angular/http'; 打包到你的 module.ts 文件中，并将它添加到你的导入中。

【讨论】：

【解决方案16】：

我只是将这两个都添加到我的 app.module.ts 中：

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

&

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

现在它工作正常.... 并且不要忘记添加

@NgModule => Imports:[] array

【讨论】：