Angular EXCEPTION：沒有供應商的HTTP

Question

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

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

您必須在導入需要http的組件的HTML文件中包含Angular2 http。

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

Answer 3

，因爲它只是在註釋部分我重複回答埃裏克：

我必須包括HTTP_PROVIDERS

Answer 4

由於rc.5你必須做一些像

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

platformBrowserDynamic().bootstrapModule(AppModule); 

Answer 5

> = 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以前的版本。

Answer 6

爲RC5的，你需要導入的HttpModule像這樣：

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

則包括上述由君特提到的進口數組中的HTTP模塊。

Answer 7

隨着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); 

Answer 8

最好的辦法是通過下面的供應商陣列添加的是http更改組件的裝飾。

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

Answer 9

就包括以下庫：

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

，包括在providers節的HTTP類，如下所示：

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

Answer 10

導入HttpModule在app.module.ts文件。

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

還記得申報的HttpModule下的進口象下面這樣：

imports: [ 
    BrowserModule, 
    HttpModule 
    ], 

Answer 11

進口陣列添加的HttpModule在app.module.ts文件然後再使用它。

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

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

Answer 12

我在我的代碼面臨這個問題。我只把這段代碼放在我的app.module.ts中。

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

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

Answer 13

如果你在你的測試這個錯誤，你應該爲所有服務創建僞造服務：

例如：

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

Answer 14

您只需在巡視中包含以下庫app.module.ts，也包括它在你的進口：

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

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

Answer 15

** 

簡單soultion：導入的HttpModule和HttpClientModule您app.module.ts

**

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 { }