Угловое ИСКЛЮЧЕНИЕ: Нет провайдера 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' }) });
- Как повторить fragment HTML несколько раз без ngFor и без другого @Component
- Как динамически создавать загрузочные модалы как компоненты Angular2?
- Проблема с обнаружением изменений. Почему это изменяется, когда это одна и та же ссылка на объект с On Push
- Как итерации ключей объектов с помощью * ngFor
- Как очистить кеш шаблонов?
- Как получить текущий маршрут
- Угловая 2: маршрутизация без изменения URL-адреса
- Angularjs препятствуют отправке формы при неудачной проверке ввода
- Запускать функцию controllerа всякий раз, когда открывается или отображается вид
- Угловой 4 - «Нельзя привязываться к« ngModel », так как это не известное свойство ошибки« input »
- Связывает Angularjs с новым элементом html динамически
- CORS и API API Google Maps
- Изменение заголовка страницы с помощью нового маршрутизатора «Угловой 2»
Импортировать 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