无法实例化循环依赖！ HttpClient ("[ERROR ->]"): 在 ./AppModule@-1:-1 中的 NgModule AppModule

Question

我已经实现了一个拦截器来添加我可以制作 seucred api 的授权标头。 在任何应用程序模块中注入此服务时出现错误 // "无法实例化循环依赖！HttpClient("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1"

// auth拦截器添加授权承载

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Auth } from './auth.service';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(public auth: Auth) {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(request);
  }
}


// Auth service

    import { Injectable } from '@angular/core';
    import { Router } from '@angular/router';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map';
    import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';

    @Injectable()
    export class Auth {
      // Store profile object in auth class
      userProfile: Object;
      public token: string;
      constructor(private router: Router, private http: HttpClient) {
          // set token if saved in local storage
          const currentUser = JSON.parse(localStorage.getItem('currentUser'));
          this.token = currentUser;
      }
      login(username: string, password: string) {
        const headers = new HttpHeaders()
          .set('Content-Type', 'application/x-www-form-urlencoded')
          .set('Accept', 'application/json');
        const params = new HttpParams().set('username', username).set('password', password)
          .set('grant_type', 'password');
        return this.http.post('http://rrrrr/token', params.toString(),
          { headers }).subscribe(data => {
            this.token = data['access_token'];
          console.log(this.token);
        },
        err => {
          console.log('Error occured');
        });
      }
      getToken() {
        return this.token;
      }
      logout(): void {
          // clear token remove user from local storage to log user out
          this.token = null;
          localStorage.removeItem('currentUser');
      }
      public authenticated(): boolean {
        // Check whether the current time is past the
        // access token's expiry time
        const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
        return new Date().getTime() < expiresAt;
      }
    }

Answer 1

您的Auth 服务依赖于HttpClient，这导致了循环依赖。

您可以做的是将您的Auth 服务分成两部分：一个具有大部分现有功能的Auth，另一个具有您的getToken() 功能（可能还有其他功能）的AuthContextService。然后，您的 Auth 服务可以依赖于您的 AuthContextService，您的 AuthInterceptor 也可以。

编辑：添加一些代码来尝试解释

@Injectable()
export class AuthContextService {
    // With getToken() in here, and not in Auth, you can use it in AuthInterceptor
    getToken(): string {
        return 'however you get your token';
    }   
}

@Injectable()
export class Auth {
    constructor (private http: HttpClient, private authContext: AuthContextService) {}

    authenticate(username: string, password: string) {
        // Do stuff
    }

    // Whatever other functions you already have on Auth.
}

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(public authContext: AuthContextService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.authContext.getToken()}`
      }
    });
    return next.handle(request);
  }
}

Answer 2

这是一个known issue，有几种可能的解决方法。它通常发生在您的身份验证拦截器服务中。

更改注入 AuthService 的方式对我有用，请参阅下面的代码 sn-p。请注意此处Injector 的用法以及在intercept() 函数中直接注入AuthService 的方式。

import { Injectable, Injector } from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HTTP_INTERCEPTORS,
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { AuthService } from 'app/services/auth/auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private injector: Injector) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
    // inject your AuthService here using Injector
    const auth = this.injector.get(AuthService);
    const authHeader = `Bearer ${auth.getToken()}`;
    const authReq = req.clone({
      headers: req.headers.set('Authorization', authHeader),
    });
    return next.handle(authReq);
  }
}

export const AuthHttpInterceptor = {
  provide: HTTP_INTERCEPTORS,
  useClass: AuthInterceptor,
  multi: true,
};

Answer 3

这种循环依赖的一个常见原因！ HttpClient ERROR 通常与 NullInjectorError 相关联。

因此，如果您有一个关于 No provider for HttpClient! 的伴随记录错误，我相信这个解决方案会有所帮助：

1. 打开 Angular 应用的 app.module.ts 文件。
2. 从 @angular/common/http 导入 HttpClientModule。
3. 将 HttpClientModule 添加到 @NgModule 导入数组。

您的 AppModule 应如下所示

import { HttpClientModule } from '@angular/common/http';

@NgModule({
imports: [
BrowserModule,
HttpClientModule,
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

HttpClient 是 Angular 通过 HTTP 与远程服务器通信的机制。您可以查看此链接以获取更多信息https://www.thecodebuzz.com/angular-null-injector-error-no-provider-for-httpclient/