Brak dostawcy dla Http

Question

Mam problem z wstrzykiwaniem HTTP do aplikacji Angular 2. Kilka dni temu, że działa dobrze, ale teraz mam o błędach:

ORIGINAL EXCEPTION: No provider for Http!

Jest main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 
import { LoginModule } from "./login/login.module"; 
import { Http } from "@angular/http"; 


platformBrowserDynamic().bootstrapModule(LoginModule); 

Zaloguj module.ts

@NgModule({ 
    imports: [BrowserModule, FormsModule], // external modules for all components 
    declarations: [LoginComponent], // component which belong to this module 
    bootstrap: [LoginComponent] // component on load 
}) 
export class LoginModule { 
} 

i wreszcie LoginComponent w LoginModule

import { Component } from '@angular/core'; 
import { AccountService } from "../data/account.service"; 
import { Http, Response, RequestOptions, Headers } from '@angular/http'; 
import { LocalStorage } from '../storage/storage'; 

@Component({ 
    selector: 'tp-login', 
    templateUrl: `app/login/login.html`, 
    styleUrls: ['app/login/login.css'], 
    providers: [AccountService, LocalStorage] 

}) 

Istnieje wyjątek w LoginComponent o braku HttpProvider. Ktoś wie, jak rozwiązać ten problem?

Answer 1

Najpierw usuń importuj {LoginModule} z "./login/login.module"; w twoim main.ts, to nie rozwiąże twojego problemu.

spróbować zaimportować HttpModule do pliku moduł logowania lub w module głównym:

import { HttpModule } from '@angular/http'; 
 
@NgModule({ 
 
    imports: [HttpModule, BrowserModule, FormsModule], 
 
    declarations: [LoginComponent], // component which belong to this module 
 
    bootstrap: [LoginComponent] // component on load 
 
}) 
 
export class LoginModule { 
 
}

Answer 2

Dobrze incapsulate wszystkie zależności modułu do głównego modułu klasy wewnątrz @ngModule atrybutu

import { BrowserModule } from '@angular/platform-browser'; 
import {NgModule} from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(appRoutes) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 

Dzięki temu możesz być pewny gdy twój moduł zostanie włączony jako zależność od dziecka - wszystkie zależności zostaną rozwiązane wcześniej.

Answer 3

W module aplikacji.

importu HttpModule HTTP z @ kątowej/HTTP

import {HttpModule, RequestOptions, XHRBackend, Http} from "@angular/http"; 

Dodaj HttpModule importowania obiektu @NgModule dekoracji

imports: [ 
    HttpModule, 
] 

Zapewnić HTTP w Providers własności @NgModule

providers: [ 
    {provide: Http, useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new Http(backend, defaultOptions), 
     deps: [XHRBackend, RequestOptions]} 
], 

Answer 4

Dodaj HttpModule w swoim filtrze usługi e:

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

a następnie dodać go HttpModule w app.module.ts:

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

aw ngModules również importuje

imports: [ 
    BrowserModule, 
    HttpModule ]