Błąd wtryskiwacza "Błąd analizy dostawcy: nie można utworzyć wystąpienia zależności cyklicznej!"

Question

Próbowałem utworzyć HttpInterceptor, aby dodać nagłówki autoryzacji do każdego http, który się dzieje. Potrzebuję pobrać nagłówki z usługi o nazwie AuthService. Oto poniżej kod:

Interceptor:

import { Injectable } from '@angular/core'; 
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'; 
import { AuthService } from './auth.service'; 

@Injectable() 
export class AuthInterceptor implements HttpInterceptor { 
    constructor(private auth: AuthService) { } 
} 

AuthService:

import { HttpClient } from '@angular/common/http'; 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class AuthService { 
    constructor(private http: HttpClient) { } 
} 

AppModule:

providers: [{ 
    provide: HTTP_INTERCEPTORS, 
    useClass: AuthInterceptor, 
    multi: true, 
    }, AuthService] 

I pojawia się następujący błąd:

Error: Provider parse errors: Cannot instantiate cyclic dependency! InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

Sprawdziłem już poprzednie odpowiedzi, ale nie rozumiem, gdzie wykryto cykliczną zależność. Co próbuję zrobić jest opisany tutaj: https://angular.io/guide/http#setting-new-headers

Answer 1

Spójrz na to GitHub Discussion (Issue #18224)

jako obejście można użyć Injector ręcznie i wstrzyknąć odpowiednią usługę wewnątrz intercept metody: https://github.com/angular/angular/issues/18224#issuecomment-316957213

I resolved simply not setting authService in constructor but getting in the intercept function.

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    // Get the auth header from the service. 
    const auth = this.inj.get(AuthenticationService); 
    const authToken = auth.getAuthorizationToken(); 
    ... 
} 

---

UPDATE:

Przed kątowa 4.3.0 un Na szczęście jest to niemożliwe do zastosowania Injector ręcznie wewnątrz intercept metody:

ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded

Więc jest jeszcze jedna obejście użyciu rxjs:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    return Observable.create((observer: any) => { 
     setTimeout(() => { 
      const authService = this.injector.get(AuthenticationService) 
      observer.next(authService.getAuthorizationHeader()) 
      observer.complete() 
     }) 
    }) 
     .mergeMap((Authorization: string) => { 
      let authReq = req 

      if (Authorization) { 
       authReq = req.clone({ 
        setHeaders: { 
         Authorization 
        } 
       }) 
      } 

      return next.handle(authReq) 
     }) 
} 

Answer 2

Usuń AuthService z listy dostawców, ponieważ jest importowany w Interceptor już w ten sposób zależność cykliczna.