I have issue with injecting HTTP into Angular 2 application. Few days ago it was working fine but now I have error:
ORIGINAL EXCEPTION: No provider for Http!
There is 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);
Login 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 {
}
And finally LoginComponent in 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]
})
There is exception in LoginComponent about no HttpProvider. Somone know how to solve that issue ?
Good to incapsulate all your module dependencies into main class module inside @ngModule
attribute
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]
})
So you can be sure that when your module will be included as child dependency - all dependecies will be resolved before.
In the App Module.
Import HttpModule
and Http
from @angular/http
:
import {HttpModule, RequestOptions, XHRBackend, Http} from "@angular/http";
Add the HttpModule
to import property in @NgModule
declarations:
imports: [
HttpModule,
]
Provide Http
in Providers
property of @NgModule
providers: [
{provide: Http, useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new Http(backend, defaultOptions),rations
deps: [XHRBackend, RequestOptions]}
],
First, remove the import { LoginModule } from "./login/login.module"; in your main.ts, it doesn't solve your problem.
Try importing HttpModule into your Login module file or in your root module:
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 { }
Add HttpModule
in your component/
service file :
import { Http , HttpModule} from '@angular/http';
and then add it HttpModule
in app.module.ts
:
import { Http ,HttpModule} from '@angular/http';
and in ngModules imports also
imports: [
BrowserModule,
HttpModule ]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.