#Angular 14 to Angular 16 Upgrade: Cyclic Dependency Issue

4 messages · Page 1 of 1 (latest)

sterile lynx
#

We are trying to upgrade our Angular project to 16 which is currently on 14 version. After following the installation guide, when I'm running the project it's giving following error:

Error: NG0200: Circular dependency in DI detected for Functions. Find more at https://angular.io/errors/NG0200
at throwCyclicDependencyError (core.mjs:228:11)
at R3Injector.hydrate (core.mjs:9448:13)
at R3Injector.get (core.mjs:9323:33)
at injectInjectorOnly (core.mjs:842:40)
at Module.ɵɵinject (core.mjs:848:60)
at Object.AnalyticsService_Factory [as factory] (analytics.service.ts:12:30)
at core.mjs:9454:43
at runInInjectorProfilerContext (core.mjs:798:9)
at R3Injector.hydrate (core.mjs:9453:17)
at R3Injector.get (core.mjs:9323:33)

When checked AnalyticsService, we haven't imported any other service to have cyclic dependency

constructor(
    private functions: Functions,
    private route: ActivatedRoute,
) {
    Console.log('%c[SF] Calling SERVICE: ' + 'AnalyticsService', 'color: yellow;');
}

But, still we are getting the above error, after debugging more found it when we remove Functions from this service, then issue jumps to next service.

import { Functions, httpsCallableData } from '@angular/fire/functions';

So, @angular/fire is causing this issue I guess.

Solutions I tried but didn't worked:

  • Using different @angular/fire versions
  • Deleting node_modules and package-lock.json
  • Checked node and typescipt versions
  • Checked all the services for cyclic dependency

As it is running fine in Angular 14, so I think the code is correct. Something, wierd is happening in Angular 16 which is causing this issue.

Need some help to debug this. Has anyone faced this or know any solution or workaround?

faint dust
#

I've never faved this before but it's not a good practice to update Angular more than one version forward. You could try to update to 15, correct and update everything you need and after that you'll update to 16.

sharp mountain
#

I had a similar issue in a service in a shared library. Turns out the shared library wasn't using the same angular references, so I added a link to the parents node_modules in the tslib files.. But I had to remove that again for angular17, where it works fine without it

still coral
#

Hello, did you resolved the problem? I moved my project from v14 to v17. My problem was the i had a dependency compiled in angular v6 and no more compatible with the new compiler of angular (ivy)