typescript 没有 Http 提供者

No provider for Http

提问by miechooy

I have issue with injecting HTTP into Angular 2 application. Few days ago it was working fine but now I have error:

我在将 HTTP 注入 Angular 2 应用程序时遇到问题。几天前它工作正常，但现在我有错误：

ORIGINAL EXCEPTION: No provider for Http!

原始例外：没有提供 Http!

There is main.ts

有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

登录模块.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

最后是 LoginModule 中的 LoginComponent

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 ?

LoginComponent 中有关于没有 HttpProvider 的异常。有人知道如何解决这个问题吗？

回答by VadimB

Good to incapsulate all your module dependencies into main class module inside @ngModuleattribute

很好地将所有模块依赖项封装到@ngModule属性内的主类模块中

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.

因此，您可以确定何时将您的模块作为子依赖项包含在内 - 所有依赖项都将在之前解决。

回答by Basavaraj Bhusani

In the App Module.

在应用模块中。

Import HttpModuleand Httpfrom @angular/http:

进口HttpModule和Http从@angular/http：

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

Add the HttpModuleto import property in @NgModuledeclarations:

HttpModule在@NgModule声明中添加to import 属性：

imports: [
    HttpModule,
]

Provide Httpin Providersproperty of @NgModule

Http在Providers财产中提供@NgModule

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

回答by Faly

First, remove the import { LoginModule } from "./login/login.module"; in your main.ts, it doesn't solve your problem.

首先，删除 import { LoginModule } from "./login/login.module"; 在您的 main.ts 中，它不能解决您的问题。

Try importing HttpModuleinto your Login module file or in your root module:

尝试将HttpModule导入您的登录模块文件或根模块中：

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

回答by Pulkeet Katiyar

Add HttpModulein your component/service file :

添加HttpModule您的component/服务文件：

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

and then add it HttpModulein app.module.ts:

然后将其添加HttpModule到app.module.ts：

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

and in ngModules imports also

并且在 ngModules 进口中也

imports: [
    BrowserModule,
    HttpModule   ]