角度例外：没有 Http 提供者

导入 HttpModule

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

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

https://v2.angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

https://v2.angular.io/docs/ts/latest/guide/ngmodule.html

---

>= 角 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 非常相似。

---

在 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);

---

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

从“@angular/http”导入 { HttpModule }； @NgModule({ 声明：[ AppComponent, CarsComponent ]，导入：[ BrowserModule，HttpModule ]，提供者：[]，引导程序：[AppComponent] }) 导出类 AppModule { }

---

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

---

因为它只是在评论部分我重复埃里克的回答：

我必须包括 HTTP_PROVIDERS

---

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

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

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

imports: [
    BrowserModule,
    HttpModule
  ],

---

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

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

---

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

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

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

---

只需包含以下库：

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

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

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

---

如果您在测试中遇到此错误，您应该为所有服务创建 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 中：

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

---

**

简单的解决方案：在您的 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 { }

---

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

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

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

---

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

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

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

---

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

---

我只是在我的 app.module.ts 中添加这两个：

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

&

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

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

@NgModule => Imports:[] array

---