沒有提供商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服務

回答

相關問題