1

我有AppModule片段，我在其中注入令牌处理拦截器

@NgModule({
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 declarations: [AppComponent],
 providers: [
   AuthService,
   {
     provide: HTTP_INTERCEPTORS,
     useClass: BasicTokenInterceptor,
     multi: true
   }
 ],
 exports: [AppComponent],
 bootstrap: [AppComponent]
})
export class AppModule { }

我的拦截器

@Injectable()
export class BasicTokenInterceptor implements HttpInterceptor {

    constructor(private auth: AuthService) {}
...

接收错误

Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
    at NgModuleProviderAnalyzer.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleProviderAnalyzer.parse (compiler.es5.js:11684)
    at NgModuleCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleCompiler.compile (compiler.es5.js:18497)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModule (compiler.es5.js:26825)
    at compiler.es5.js:26770
    at Object.then (compiler.es5.js:1679)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26768)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26697)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522)
    at Object.../../../../../src/main.ts (main.ts:11)

如果我在拦截内进行注入：

@Injectable()
export class BasicTokenInterceptor implements HttpInterceptor {

    auth:AuthService;

    constructor(private _injector:Injector) {}

    addToken(req: HttpRequest<any>, token: string): HttpRequest<any> {

       return (req as HttpRequest<any>).clone({ setHeaders: { Authorization: token }});
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {

       this.auth = this._injector.get(AuthService);

       return next.handle(this.addToken(req, this.auth.getToken()) 
...

然后相对误差：

ERROR TypeError: Cannot read property 'length' of null
    at HttpHeaders.webpackJsonp.../../../common/@angular/common/http.es5.js.HttpHeaders.applyUpdate (http.es5.js:481)
    at http.es5.js:440
    at Array.forEach (<anonymous>)
    at HttpHeaders.webpackJsonp.../../../common/@angular/common/http.es5.js.HttpHeaders.init (http.es5.js:440)
    at HttpHeaders.webpackJsonp.../../../common/@angular/common/http.es5.js.HttpHeaders.forEach (http.es5.js:519)
    at Observable._subscribe (http.es5.js:1628)
    at Observable.webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe (Observable.js:171)
    at Observable.webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe (Observable.js:159)
    at CatchOperator.webpackJsonp.../../../../rxjs/operator/catch.js.CatchOperator.call (catch.js:79)
    at Observable.webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe (Observable.js:156)

我尝试了 Angular git Cyclic dependency error with HttpInterceptor #18224中提到的解决方案， 但仍然没有成功。

4

1 回答 1

1

您可以通过手动注入服务Injector，这将有助于避免此类错误：

/* Other imports */
import { Injectable, Injector } from '@angular/core';
import { AuthService } from 'path/to/auth.service';

@Injectable()
export class BasicTokenInterceptor implements HttpInterceptor {
  constructor(private _injector: Injector) {
    setTimeout(() => {
      const _authService = this._injector.get(AuthService);
      /* Or store it to class property, as you like */
      _authService.callMethod();
      /* ... */
    });
  }
/* ... */
}
于 2018-05-02T19:54:51.520 回答