角度未捕获错误：无法解析 ErrorInterceptor 的所有参数

Question

在尝试注入 AuthenticationService 时，我收到以下消息：“未捕获的错误：无法解析 ErrorInterceptor 的所有参数：(?)”。

error.interceptor.ts

import { Injectable } from '@angular/core';
import ...

import { AuthenticationService } from '@/_services';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    constructor(private authenticationService: AuthenticationService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): 
    Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if (err.status === 401) {
                // auto logout if 401 response returned from api
                this.authenticationService.logout();
                location.reload(true);
            }

            const error = err.error.message || err.statusText;
            return throwError(error);
        }))
    }
}

authentication.service.ts

import { Injectable } from '@angular/core';
import ...

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
private currentUserSubject: BehaviorSubject<User>;
public currentUser: Observable<User>;

constructor(private http: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
    this.currentUser = this.currentUserSubject.asObservable();
}

public get currentUserValue(): User {
    return this.currentUserSubject.value;
}

login(username, password) {
    ...
}

logout() {
    ...
}
}

app.module.ts 包含：

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

我正在使用 Angular 8。 完整的错误代码：

Uncaught Error: Can't resolve all parameters for ErrorInterceptor: (?).
at syntaxError (compiler.js:2687)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:21355)
at CompileMetadataResolver._getTypeMetadata (compiler.js:21248)
at CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:21470)
at CompileMetadataResolver.getProviderMetadata (compiler.js:21479)
at eval (compiler.js:21417)
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (compiler.js:21377)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:21096)
at JitCompiler._loadModules (compiler.js:27143)

Answer 1

问题是循环依赖。 AuthenticationService需要HttpClient，HttpClient需要Interceptors，ErrorInterceptor需要AuthenticationService。

为了解决这个问题，您需要将AuthenticationService 分成两层——一层用于存储身份验证数据，一层用于 API 通信。

class AuthenticationStore {
   storeData(authData) {}
   getData(): AuthData {}
   clearData() {}

假设你有AuthenticationStore。然后ErrorInterceptor 将使用AuthenticationStore 而不是AuthenticationService。

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    constructor(private authenticationStore: AuthenticationStore) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): 
    Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if (err.status === 401) {
                // auto logout if 401 response returned from api
                this.authenticationStore.clearData();
                location.reload(true);
            }

            const error = err.error.message || err.statusText;
            return throwError(error);
        }))
    }
}

或者你可以使用注射器，这是一个有点脏的解决方案。

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

    intercept(request: HttpRequest<any>, next: HttpHandler): 
    Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if (err.status === 401) {
                // auto logout if 401 response returned from api
                const authenticationService = this.injector.get(AuthenticationService);
                authenticationService.logout();
                location.reload(true);
            }

            const error = err.error.message || err.statusText;
            return throwError(error);
        }))
    }
}