我试图将Angular Material 2元素注入我编写的自定义错误处理程序中,但我一直收到此错误:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
这是错误处理程序类:
@Injectable()
export class CustomErrorHandler implements ErrorHandler {
constructor(private snackBar: MdSnackBar) {
}
handleError(error: any): void {
//FIXME: display popup
console.error('Error occurred!');
console.error(error);
this.snackBar.open('Application Error: ' + error, 'X', {
duration: environment.snackBarTime,
});
}
}
这是app.module的提供者部分
providers: [
SearchService,
CompanyService,
MdSnackBar,
PopupService,
AuthService,
LoginService,
AuthGuard,
ErrorService,
TokenStorageService,
BankService,
CountryService,
{provide: ErrorHandler, useClass: CustomErrorHandler},
{provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
],
exports: [
TranslateModule
],
bootstrap: [AppComponent]
})
答案 0 :(得分:9)
我们必须在执行handleError函数时手动调用带有服务名称的注入器。
所以我不得不使用内置的Inject
来注入我的服务依赖项。调用custom-error-handler
注入PopupService
依赖项的MdSnackBar
类的最终结果如下所示:
@Injectable()
export class CustomErrorHandler implements ErrorHandler {
constructor(private injector: Injector) {
}
handleError(error: any): void {
console.log(error);
const popupService = this.injector.get(PopupService);
}
}
这是PopupService:
@Injectable()
export class PopupService {
constructor(private snackBar: MdSnackBar) {
}
public throwErrorPopup(textOfError: string) {
this.snackBar.open(textOfError, 'X', {
duration: environment.snackBarTime,
});
}
}
此处提到的解决方案:https://medium.com/@amcdnl/global-error-handling-with-angular2-6b992bdfb59c
答案 1 :(得分:0)
在我的情况下,问题是我将服务注入了它自己的构造函数中。复制代码时,我犯了这个菜鸟错误。如果对我这样的人有帮助。
export class AskLanguageProvider {
public selectedLang = new Subject<any>();
constructor(private alertCtrl: AlertController,
public storage: Storage,
private lan: AskLanguageProvider, // <= The culprit
public translate: TranslateService) { }
答案 2 :(得分:0)
对我来说,接受的答案无效,对我来说,没有提供者错误。但是我发现了实现此目标的不同方法。
从app.module.ts构造函数中,我正在调用WampService setter方法,该方法需要包含WampErrorHandler服务。
export class AppModule {
constructor(private wampService: WampService) {
this.wampService.setErrorHandler(WampErrorHandler);
}
}
但是在WampService中,setErrorHandler方法看起来像这样:
setErrorHandler(handler) {
this.wampErrorHandler = this.injector.get(handler)
};
我也在构造函数中使用Injector:
constructor(private injector: Injector) {}