没有提供 Angular 2 和 Http 服务的 XHRBackend

Question

我正在构建一个基于 angular2（angularcli 生成）、webpack、scss 和面向模块的项目。

对于 http 请求，我决定创建一个供身份验证服务使用的服务。

全部在核心模块中引用

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 (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 (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

Answer 1

您没有引用上下文（如果我是正确的），请尝试使用箭头函数：

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

无论如何，为什么不在 imports 中添加 Http (HttpModule) 模块？AppModule？

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 ]

Answer 2

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

这是一个示例：

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

没有提供 Angular 2 和 Http 服务的 XHRBackend

No provider for XHRBackend with Angular 2 and Http service

dependency-injection

webpack

ng-modules

angular