angular - 角度未捕获错误:无法解析 ErrorInterceptor 的所有参数
问题描述
我得到以下信息:“未捕获的错误:无法解析 ErrorInterceptor 的所有参数:(?)”尝试注入 AuthenticationService 时。
错误拦截器.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);
}))
}
}
身份验证.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)
解决方案
问题是循环依赖。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);
}))
}
}
推荐阅读
- python - 如何修复我的代码以便能够创建新的存储库
- git - `ssh:连接到主机 ssh.dev.azure.com 端口 22:连接超时`错误
- php - 如何使用 php 解析 2019-08-01T16:20:00+02:00 日期时间
- xamarin - Xamarin.forms 无需在 Android 中使用拨号器即可拨打电话
- python - 使用python看不到矩阵图的结果
- cordova - 在 android 9 中发出 ajax 请求时出现 jqXHR.status === 0 错误
- javascript - 节点 crypto.randomBytes 从函数返回令牌
- action - 提交我的 google action assistant 应用以发布时出错
- php - 如何摆脱2个while循环并继续for循环过程
- javascript - 单击 ag-grid 时自定义过滤器未定义抛出错误