Angular 2没有提供Http

我得到的EXCEPTION: No provider for Http! 在我的Angular 2.我做错了什么？

 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' }) }); 

Answer 1

导入HttpModule

 import { HttpModule } from '@angular/http'; @NgModule({ imports: [ BrowserModule, HttpModule ], providers: [], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export default class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule); 

理想情况下，您将这些代码分成两个单独的文件。 更多信息请阅读：

• https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html
• https://angular.io/docs/ts/latest/guide/ngmodule.html

Answer 2

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 。

Answer 3

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

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

Answer 4

在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你可以像这样bootstrap：

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

Answer 5

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

我不得不包含HTTP_PROVIDERS

Answer 6

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

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

Answer 7

添加HttpModule来导入app.module.ts文件中的数组，然后再使用它。

 import { HttpModule } from '@angular/http'; @NgModule({ declarations: [ AppComponent, CarsComponent ], imports: [ BrowserModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

Answer 8

您必须在导入需要http的组件的HTML文件中包含Angular2 http。

 <script src="https://code.angularjs.org/2.0.0-alpha.46/http.dev.js"></script> 

Answer 9

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

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

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

Answer 10

只需包含以下库：

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

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

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

Answer 11

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

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

还要记得在如下的导入下声明HttpModule：

 imports: [ BrowserModule, HttpModule ], 

Answer 12

 Solved : I faced this issue in my code, i only put this code in my app.module.ts import { HttpModule } from '@angular/http'; @NgModule({ imports: [ BrowserModule, HttpModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 

Answer 13

如果您在testing中遇到此错误，则应为所有服务创build假服务：

例如：

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