Angular 提供程序，循环依赖错误

Posted 2023-03-31

【中文标题】Angular 提供程序，循环依赖错误

【英文标题】：Angular Provider, Cyclic Dependency Error

【发布时间】：2017-12-12 08:44:38

【问题描述】：

我收到此错误： 提供者解析错误：无法实例化循环依赖！

我有一个组件可以对我的后端进行 http 调用：backend.component.ts

import  HttpClient  from '@angular/common/http';
public basicQuery(): void 
  this.httpClient.get('http://...')
    .subscribe(
    (response) => 

    ,
    error => 

    );

我每次调用都使用拦截器。token.interceptor.ts

public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
  request = request.clone(
    setHeaders: 
      token: this.auth.getToken()
    
  );

  return next
    .handle(request)
    .do(
    (response: HttpEvent<any>) => 
    ,
    (error: any) => 
      return false;
  );

如果我收到错误，我会在我的自定义错误处理程序中进行处理，因为我想将错误发送到我的后端。custom-error-handler.ts

handleError(error): void 
  this.errorLogService.logServer(error);
  super.handleError(error);

因此我使用服务。errorLog.service.ts

import  HttpClient  from '@angular/common/http';
logServer(error: Error) 
  this.httpClient.post('http://...', JSON.stringify(error.message))
    .subscribe(
    (response) =>  ,
    (error) =>  );

这就是问题所在，因为我也使用 httpClient。 但是我怎样才能避免这种失败，如何做对呢？ 现在我使用 'Http' 而不是 'HttpClient'。

更新 1

private auth: AuthService;

constructor(
  private utils: Utils,
  private router: Router,
  private injector: Injector
) 
  this.auth = this.injector.get(AuthService);


public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
  request = request.clone(
    setHeaders: 
      token: this.auth.getToken()
    
  );

  return next
    .handle(request)
    .do(
      (response: HttpEvent<any>) =>  ,
      (error: any) =>  return false 
    );

更新 2

将 AuthService 和 Router 注入 body 可以解决问题：

public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
  const started = Date.now();

  this.auth = this.injector.get(AuthService);
  this.router = this.injector.get(Router);

  (...)

【问题讨论】：

那么你的拦截器中有这个吗？我在拦截器构造函数中遇到了同样的错误，如果是，我可能会为您解答。

【参考方案1】：

你可以这样做，不要在构造函数中注入服务，而是在你的函数体中这样做。在这里您也不会遇到诸如达到最大呼叫数之类的问题。

@Injectable()
export class YourInterceptor implements HttpInterceptor 
  yourService: YourService;
  constructor(private inject: Injector) 
    //this.yourService = inject.get(YourService);
  

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> 

    this.yourService = this.inject.get(YourService);

    request = request.clone(
       setHeaders: 
          token: this.YourService.getToken()
       
    );

    return next.handle(request);    
  

根据你的构造函数试试这个，

private auth: AuthService;
private router: Router;

constructor(
  private utils: Utils,
  private injector: Injector
) 



public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
  this.router = this.injector.get(Router);
  this.auth = this.injector.get(AuthService);
  request = request.clone(
    setHeaders: 
      token: this.auth.getToken()
    
  );

  return next
    .handle(request)
    .do(
      (response: HttpEvent<any>) =>  ,
      (error: any) =>  return false 
    );

【讨论】：

这也不起作用 -> RangeError: 超出最大调用堆栈大小

你能显示你的构造函数代码吗？你写的拦截器

已更新，但我认为它是从 error.service 中出来的，因为我还导入 httpClient 而不是从拦截器中导入。

那你为什么在改变之后超过了最大通话？我正在更新我的答案，尝试一下，让我知道它是否有效，我相信它会因为在构造函数中你已经提供了我认为是错误或不正确的服务注入。我相信我在构造函数中的注释代码让你有点困惑，这些注释是因为如果我取消注释，我遇到了最大堆栈大小的相同问题。 :)

对不起，不起作用。我现在在拦截（）中注入 auth.service。提供者解析错误：无法实例化循环依赖！路由器 ("[ERROR ->]")