Проблема в предоставлении Interceptor и зависимой пользовательской службы в одном модуле - PullRequest
Новая
       48

Проблема в предоставлении Interceptor и зависимой пользовательской службы в одном модуле

0 голосов
/ 02 мая 2018

У меня есть 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 Ошибка циклической зависимости с HttpInterceptor # 18224 Но все равно безуспешно.

1 Ответ

0 голосов
/ 02 мая 2018

Вы можете ввести услугу вручную через 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();
      /* ... */
    });
  }
/* ... */
}
...