Circular dependency in DI detected for ApplicationRef

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other...

Current behavior

When trying to inject the HotToastService in a custom ErrorHandler I get the following error:

Error: NG0200: Circular dependency in DI detected for ApplicationRef. Find more at https://angular.io/errors/NG0200
    at throwCyclicDependencyError (core.js:216)
    at R3Injector.hydrate (core.js:11408)
    at R3Injector.get (core.js:11232)
    at injectInjectorOnly (core.js:4728)
    at ɵɵinject (core.js:4732)
    at Object.ViewService_Factory [as factory] (ngneat-overview.js:437)
    at R3Injector.hydrate (core.js:11412)
    at R3Injector.get (core.js:11232)
    at injectInjectorOnly (core.js:4728)
    at ɵɵinject (core.js:4732)

Other components can inject the service without any issues.

Expected behavior

Should be able to inject the service in the custom error handler.

Minimal reproduction of the problem with instructions

Setup the library and the following service:

@Injectable()
export class AppErrorHandlerService implements ErrorHandler {
  constructor(private readonly toast: HotToastService) {}

  handleError(error: any): void {
    this.toast.error('Unexpected error.');
    console.error(error);
  }
}

Provide via { provide: ErrorHandler, useClass: AppErrorHandlerService }.

The issue might’ve been introduced with Angular v12, as another project on v11 has this pattern working.

Environment

"@angular/core": "~12.0.2",
"@ngneat/hot-toast": "^2.0.2",
"@ngneat/overview": "^1.0.0",

Issue Analytics

State:
Created 2 years ago
Comments:6

Top GitHub Comments

2reactions

shhdharmencommented, Jun 8, 2021

You can get HotToastService from Injector:

    import { ErrorHandler, Inject, Injectable, Injector } from '@angular/core';
    import { HotToastService } from '@ngneat/hot-toast';

    @Injectable()
    export class AppErrorHandlerService implements ErrorHandler {
      constructor(@Inject(Injector) private readonly injector: Injector) {}

     /**
     * Need to get HotToastService from injector rather than constructor injection to avoid cyclic dependency error
     * @returns {} 
     */
      private get toast() {
        return this.injector.get(HotToastService);
      }

      handleError(error: any): void {
        this.toast.error(error.message);
        console.error(error);
      }
    }

Ref: https://github.com/scttcper/ngx-toastr/issues/327#issuecomment-361304175

0reactions

wellington1993commented, Sep 12, 2022

You can get HotToastService from Injector:

    import { ErrorHandler, Inject, Injectable, Injector } from '@angular/core';
    import { HotToastService } from '@ngneat/hot-toast';

    @Injectable()
    export class AppErrorHandlerService implements ErrorHandler {
      constructor(@Inject(Injector) private readonly injector: Injector) {}

     /**
     * Need to get HotToastService from injector rather than constructor injection to avoid cyclic dependency error
     * @returns {} 
     */
      private get toast() {
        return this.injector.get(HotToastService);
      }

      handleError(error: any): void {
        this.toast.error(error.message);
        console.error(error);
      }
    }

Ref: scttcper/ngx-toastr#327 (comment)

Saved my day! Thanks!