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

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

Импортировать HttpModule

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

В идеале вы разделите этот код на два отдельных файла. Для получения дополнительной информации читайте:

> = Угловой 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 в предыдущей версии.

Поскольку rc.5 вам нужно сделать что-то вроде

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

С выпуском 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); 

Добавьте HttpModule для импорта массива в файл app.module.ts, прежде чем использовать его.

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

потому что только в разделе комментариев я повторяю ответ от Эрика:

Мне пришлось включить HTTP_PROVIDERS

Лучший способ – изменить декоратор вашего компонента, добавив Http в список поставщиков, как показано ниже.

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

Импортируйте HttpModule в файл app.module.ts.

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

Также не забудьте объявить HttpModule под импортом, как показано ниже:

 imports: [ BrowserModule, HttpModule ], 

с RC5 вам нужно импортировать HttpModule следующим образом:

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

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

Просто включите следующие библиотеки:

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

и включите class http в разделе providers , а именно:

 @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(async(() => { TestBed.configureTestingModule({ providers: [ Your1Service, Your2Service, { provide: Your1Service, useClass: FakeYour1Service }, { provide: Your2Service, useClass: FakeYour2Service } ] }).compileComponents(); // compile template and css })); 
 ** 

Простое воспроизведение: импортируйте 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 { } 

Все, что вам нужно сделать, это включить следующие библиотеки в 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

  • Обработка 401s по всему миру с помощью углового
  • Как передать параметры запроса с помощью routerLink в новом Router V 3 alpha (владивосток)
  • Angular2: 2 услуги в зависимости друг от друга
  • Угловой 2 роутер без базового набора
  • Угловые 2 внешних входа
  • Как привязать к атрибуту data- * в угловом2?
  • Может ли ng-контент использоваться внутри ngFor?
  • Использование труб в ngModel для элементов INPUT в угловом
  • Angular2: Сделать дорожки нечувствительными к регистру
  • Springboot / Angular2 - Как обрабатывать URL-адреса HTML5?
  • Как динамически добавлять и удалять поля формы в Angular 2
  • Давайте будем гением компьютера.