注入器错误“提供程序解析错误:无法实例化循环依赖性!" [英] Injector Error "Provider parse errors: Cannot instantiate cyclic dependency!"
问题描述
我试图创建一个 HttpInterceptor ,以便为发生的每个http添加一些标头以进行授权.我需要从名为 AuthService 的服务获取标头.这是下面的代码:
I tried to create an HttpInterceptor to add some headers for authorization to every http that happens. I need to get the headers from a service called AuthService. Here is the code below:
拦截器:
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:
AuthService:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable()
export class AuthService {
constructor(private http: HttpClient) { }
}
AppModule:
AppModule:
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true,
}, AuthService]
我收到以下错误:
错误:提供程序解析错误: 无法实例化循环依赖! InjectionToken_HTTP_INTERCEPTORS("[ERROR->]"):在NgModule AppModule中 在./AppModule@-1:-1
Error: Provider parse errors: Cannot instantiate cyclic dependency! InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
我已经检查了先前的答案,但是我不知道在哪里检测到循环依赖性.此处描述了我要执行的操作: https://angular.io/guide/http#setting-new-headers
I already checked the previous answers but I don't understand where the cyclic dependency was detected. What I am trying to do is described here: https://angular.io/guide/http#setting-new-headers
推荐答案
作为解决方法,您可以手动使用Injector
并将相关服务注入intercept
方法内: https://github.com/angular/angular/issues/18224#issuecomment-316957213
As a workaround you can use Injector
manually and inject relevant service inside intercept
method: https://github.com/angular/angular/issues/18224#issuecomment-316957213
我解决了没有在构造函数中设置authService而得到的问题 在拦截功能中.
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();
...
}
更新:
遗憾的是,在Angular 4.3.0
之前,无法在intercept
方法内手动使用Injector
:
Prior to Angular 4.3.0
unfortunately it's impossible to use Injector
manually inside intercept
method:
ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded
因此,使用rxjs
还有另一种解决方法:
So there is one more workaround using 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)
})
}
这篇关于注入器错误“提供程序解析错误:无法实例化循环依赖性!"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!