Циклическая зависимость в DI обнаружена для ApplicationRef. Как это исправить

#angular #asp.net-core #dependency-injection #angular10

#угловая #asp.net-core #внедрение зависимостей #angular10

Вопрос:

Я новичок в Angular и попытался реализовать глобальную обработку ошибок в приложении, для этого я создаю класс appErrorHandler и реализую ErrorHandler, и я внедряю службу тостов в этот класс, но он показывает мне вышеуказанную ошибку. Класс AppErrorHandler.

   @Injectable()
 export class AppErrorHandler implements ErrorHandler {

constructor(private toastService: ToastrService) {}

handleError(error: any): void {
    this.toastService.error("An unexpected error","Error");
}    
 

}

AppModule

  providers: [
{ provide: ErrorHandler, useClass: AppErrorHandler },
MakeService
],
 imports: [
BrowserAnimationsModule,
  ToastrModule.forRoot(
  {
    timeOut: 6000,
   positionClass: 'toast-bottom-right',
   preventDuplicates: true,
  }
),
RouterModule.forRoot([
  
  {  path:'', component:HomeComponent },
  {  path:'vehicle-form', component:VehicleFormComponent },
  
]),
 

],

Изображение ошибки

Комментарии:

1. разве вам не хватает {providedIn: 'root'} AppErrorHandler @Injectable декоратора?

2. это не имеет значения

3. Я вижу … есть ли шанс, что вы могли бы повторить это в stackblitz? это действительно было бы полезно 🙂

4. Чтобы справиться с этим сценарием, вы можете использовать 2 подхода — Использовать HttpInterceptor , например: Example-HttpInterceptor — Метод создания фактора, например: Resolve-Circular-Dependency

Ответ №1:

У меня была похожая проблема, попробуйте этот хак (источник: https://github.com/ngneat/hot-toast/issues/70 )

В вашем случае:

 @Injectable()
export class AppErrorHandler implements ErrorHandler {

constructor(@Inject(Injector) private readonly injector: Injector) {}

private get toastService() {
    return this.injector.get(ToastrService);
}

handleError(error: any): void {
    this.toastService.error("An unexpected error","Error");
}