Angular cyclic dependency when enabling ivy

Question

After enabling ivy in my angular project, everything compiles but when starting the app in the browser I get the following error during app bootstrap:

Error: Cannot instantiate cyclic dependency! ApplicationRef
    at throwCyclicDependencyError (core.js:5208)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.hydrate (core.js:11763)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (core.js:11590)
    at injectInjectorOnly (core.js:648)
    at ɵɵinject (core.js:653)
    at injectArgs (core.js:730)
    at Object.factory (core.js:11858)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.hydrate (core.js:11767)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (core.js:11590)
    at injectInjectorOnly (core.js:648)

I'm struggling to find out where the cyclic dependency is and why it works fine when not using ivy. I tried using madge (madge --circular --extensions ts ./) but no circular dependency's where found.

Edit: I've manually gone though all my services and verified that there is no cyclic dependency between them

Ivonneivor

Answer 1

Turns out that in my app.module providers I had a class with {provideIn: 'root'} in the @Injectable(), removing that fixed it.

providers: [
    { provide: ErrorHandler, useClass: AppErrorHandler }
]

Before

@Injectable({ providedIn: 'root' })
export class AppErrorHandler implements ErrorHandler {

After

@Injectable()
export class AppErrorHandler implements ErrorHandler {

I don't know why this wasn't a problem before ivy, even with AoT

Ivonneivor

Answer 2

You must be injecting the Router somewhere in any of your services which uses @Injectable. So you got two options:

Solution 1

Remove the dependency of router: Router from your service constructor.

Solution 2

Upgrade to a minimum Angular 9.0.3 which fixes this issue of cyclic dependency.

(Got fixed in this MR https://github.com/angular/angular/pull/35642)

Vitriform

I'm at Angular 9.2 and this isn't fixed – Karlene

Answer 3

I had the same error after update Angular project. Before update i had like below and it works until Angular was updated:

@NgModule({
  imports: [
    ...,
    BrowserModule
  ],
  declarations: [ErrorComponent],
  providers: [
    {
      provide: ErrorHandler,
      useClass: ErrorHandlerService,
    }
  ]  
})
export class ErrorModule { }

After update, to fix this error i have changed this module to like so:

@NgModule({
  imports: [
    ...,
    BrowserModule
  ],
  declarations: [ErrorComponent]
})
export class ErrorModule { 
  public static forRoot(): ModuleWithProviders {
    return {
      ngModule: ErrorModule,
      providers: [
        {provide: ErrorHandler, useClass: ErrorHandlerService}
      ]
    };
  }
}

Albumenize