没有提供商XHRBackend与角2和HTTP服务

我建立基于angular2（angularcli生成）的WebPack，SCSS一个项目，面向模块。没有提供商XHRBackend与角2和HTTP服务

对于HTTP请求我决定创建用于由认证服务的服务。

所有在CoreModule引用

import {NgModule} from '@angular/core'; 
import {CommonModule} from '@angular/common'; 
import {RequestOptions, XHRBackend} from '@angular/http'; 

// Services 
import {HttpService} from './services/http.service'; 
import {AuthService} from './services/auth/auth.service'; 

export function httpInterceptor(backend: XHRBackend, 
           defaultOptions: RequestOptions) { 
    return new HttpService(backend, defaultOptions); 
} 


@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    providers: [ 
    AuthService, 
    { 
     provide: HttpService, 
     useFactory: httpInterceptor, 
     deps: [XHRBackend, RequestOptions] 
    } 
    ] 
}) 
export class CoreModule { 
}

而且我的AppModule：

import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule} from '@angular/core'; 
import {Router} from '@angular/router'; 

import 'materialize-css'; 

// Components 
import {AppComponent} from './app.component'; 

// Modules 
import {MaterializeModule} from 'angular2-materialize'; 
import {AppRoutingModule} from './app-routing.module'; 
import {CoreModule} from './core/core.module'; 
import {AuthModule} from './auth/auth.module'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AppRoutingModule, 
    MaterializeModule, 
    CoreModule, 
    AuthModule 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
    constructor(router: Router) { 
    console.log('Routes: ', JSON.stringify(router.config, undefined, 2)); 
    } 
}

以下是完整的问题：

ERROR Error: Uncaught (in promise): Error: No provider for XHRBackend! 
Error: No provider for XHRBackend! 
    at injectionError (core.es5.js:1169) 
    at noProviderError (core.es5.js:1207) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) 
    at resolveNgModuleDep (core.es5.js:9562) 
    at _callFactory (core.es5.js:9637) 
    at _createProviderInstance$1 (core.es5.js:9576) 
    at resolveNgModuleDep (core.es5.js:9558) 
    at injectionError (core.es5.js:1169) 
    at noProviderError (core.es5.js:1207) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) 
    at resolveNgModuleDep (core.es5.js:9562) 
    at _callFactory (core.es5.js:9637) 
    at _createProviderInstance$1 (core.es5.js:9576) 
    at resolveNgModuleDep (core.es5.js:9558) 
    at resolvePromise (zone.js:770) 
    at resolvePromise (zone.js:741) 
    at zone.js:818 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) 
    at Object.onInvokeTask (core.es5.js:3924) 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) 
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191) 
    at drainMicroTaskQueue (zone.js:584) 
    at <anonymous> 
defaultErrorLogger @ core.es5.js:1020 
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080 
next @ core.es5.js:4562 
schedulerFn @ core.es5.js:3635 
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238 
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185 
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125 
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89 
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55 
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621 
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.triggerError @ core.es5.js:3993 
onHandleError @ core.es5.js:3954 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395 
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runGuarded @ zone.js:157 
_loop_1 @ zone.js:653 
api.microtaskDrainDone @ zone.js:662 
drainMicroTaskQueue @ zone.js:592

来源

2017-06-22 An-droid

您需要导入HttpModule在你的模块中。后者提供了HTTP提供商包括XHRBackend。此外，如果你想实现对HTTP请求拦截，您需要注册您的拦截器实现（子类的Http）时要使用的Http类型。

这里有一个例子：

imports: [ 
    (...) 
    HttpModule, // <------------- 
    (...) 
], 
providers: [ 
    { 
    provide: Http, // <------------- 
    useFactory: httpInterceptor, 
    deps: [ XHRBackend, RequestOptions, Store, Injector ] 
    } 
]

来源

2017-06-22 13:40:24

我确实失踪了“的HttpModule”内CoreModule进口谢谢:)我新的Web开发，这不是那么容易 –

@安机器人不用担心，你欢迎！请记住，Angular是模块化的;-) –

你是不是引用上下文（如果我米是正确的），尝试用一个箭头功能：

return() => new HttpService(backend, defaultOptions);

不管怎么说，为什么不添加到您的AppModule，在imports，Http模块（HttpModule）？

的AppModule：

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

imports: [ HttpModule ]

在服务

而且你刚才：

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response, XHRBackend } from '@angular/http'; 

@Injectable() 
export class MyService { 

    constructor(private http: Http) { 
     } 

// Use Http's stuff 
}

然后在你的CoreModule，你可以再补充：

providers: [ MyService ]

来源

2017-06-22 13:20:06 SrAxi

没有提供商XHRBackend与角2和HTTP服务

回答

相关问题