Угловое ИСКЛЮЧЕНИЕ: Нет провайдера для Http

Question

Я получаю 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

Вы должны включить Angular2 http в файл HTML, который импортирует компонент, который нуждается в 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'; 

затем включают HttpModule в массиве импорта, как упоминалось выше, Гюнтер.

Answer 7

С выпуском Angular 2.0.0 от 14 сентября 2016 года вы все еще используете 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'; 

и включают в себя класс HTTP в providers разделе следующим образом:

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