Search code examples
angularcircular-dependencyangular-ivy

Angular cyclic dependency when enabling ivy

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

Solution

  • 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