Lỗi Injector "Lỗi phân tích cú pháp của nhà cung cấp: Không thể khởi tạo phụ thuộc tuần hoàn!"

Question

Tôi đã cố gắng tạo một HttpInterceptor để thêm một số tiêu đề để ủy quyền cho mọi http xảy ra. Tôi cần lấy các tiêu đề từ một dịch vụ có tên là AuthService. Đây là đoạn mã dưới đây:

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] 

tôi nhận được lỗi sau:

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

Tôi đã kiểm tra các câu trả lời trước nhưng tôi không hiểu nơi phát hiện sự phụ thuộc chu kỳ. Những gì tôi đang cố gắng làm được mô tả ở đây: https://angular.io/guide/http#setting-new-headers

Answer 1

Nhìn này GitHub Discussion (Issue #18224)

Là một workaround bạn có thể sử dụng Injector bằng tay và tiêm dịch vụ có liên quan bên trong intercept phương pháp: 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:

Trước kiễu góc 4.3.0 un may mắn thay nó không thể sử dụng Injector bằng tay bên intercept phương pháp:

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

Vì vậy, có thêm một workaround sử dụng 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

Xóa AuthService khỏi danh sách nhà cung cấp vì nó được nhập vào Bộ chặn do đó sự phụ thuộc theo chu kỳ.