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

],

Oversold

aren't you missing {providedIn: 'root'} in the AppErrorHandler's @Injectable decorator? – Calces

it does not make a difference – Oversold

I see... is there any chance you could replicate the thing in stackblitz? that would really be helpful :) – Calces

To handle this scenario, you can make use of 2 approaches - Make use of HttpInterceptor eg: Example-HttpInterceptor - Creating Factor Method eg: Resolve-Circular-Dependency – Hexameter

Answer 1

I had a similar issue, and didn't find the real cause. Anyway, this can be fixed by 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");
}

Maximilien

Answer 2

In my case the custom error handler was receiving dependencies, which themselves needed something that wasn't injected explicitly in the module.

    {
      provide: ErrorHandler,
      useClass: GlobalErrorHandler,
      deps: [
        BugReporterService, // This needed more dependencies
        NgZone,
        NgxUiDialogService,
        MessageService,
        TranslateService,
      ],
    },

What's counterintuitive is that it doesn't tell you which dependency is missing, so my suggestion is to divide-et-impera by commenting out dependencies until you find the culprit. Recursively.

Lemmie

Answer 3

I was getting this error after i upgraded angular to 15 .. was getting this error only while running ng test so i cleared this issue by removing browser animation module in spec file from imports and I have added shared module at the top.. always check the order of your imports ..first shared module and then browser module should be in app module..and add browser animation module at the last of your core module imports..

Sheryl

Answer 4

--NPM error message indicates a mismatch or missing peer dependency for @angular/animations when trying

solution :

1. npm install @angular/[email protected]
2. npm cache clean --force
3. npm install

Clementia

Answer 5

In my case, I had this rare Angular runtime circular dependency in DI, which was not reported by the compiler.

After trying all suggestions, I had to:

1 - Rename .Angular folder to .Angular.old;

2 - npm install

3 - ng serve

I also switched .angular.old <=> .angular folders, followed by steps 2 and 3 a couple times, for consistency on my conclusion.

Sometimes, it's not our codebase fault ;-)

Warr