Circular dependency in DI detected for ApplicationRef. How to fix it

Question

I am a beginner in Angular and tried to implement global error handling in the application for this purpose I create appErrorHandler class and implement ErrorHandler and I inject Toast Service on this class but it shows me above error. AppErrorHandler class.

  @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 },
  
]),

],

Answer 1

I had a similar issue, try this hack (source: https://github.com/ngneat/hot-toast/issues/70)

In your case:

@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");
}