5

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

对于 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
4

2 回答 2

8

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

这是一个示例：

imports: [
  (...)
  HttpModule, // <-------------
  (...)
],
providers: [
  {
    provide: Http, // <-------------
    useFactory: httpInterceptor,
    deps: [ XHRBackend, RequestOptions, Store, Injector ]
  }
]
于 2017-06-22T13:40:24.167 回答
1

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

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

无论如何，你为什么不添加到你AppModule的importsHttp( HttpModule) 模块中？

应用模块：

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-22T13:20:06.210 回答