1

Very simply I have an AuthenticationService and a UserService. UserService is included in AuthenticationService. Then when I use AuthenticationService in UserService like:

constructor(private authService: AuthenticationService){}

I get:

Circular dependency detected:
src/app/core/authentication/authentication.service.ts -> src/app/shared/services/user.service.ts -> src/app/core/authentication/authentication.service.ts

Both services are declared in the app module providers array. Why am I getting a circular dependency?

Ben Racicot
  • 5,332
  • 12
  • 66
  • 130

1 Answers1

2

You injected AuthenticationService in UserService and UserService in AuthenticationService! Do not do this!

The circular dependencies surfaced here relate to files that either directly or indirectly are mutually importing each other. It's not an uncommon occurrence in software, but the results can vary. It doesn't necessarily mean that something wrong will happen, but it's important to surface because something wrong may happen depending on the use case.

For the most part, it's fairly easy to refactor your way towards no circular dependencies, so that's why it's a warning, but ultimately, I would consider it a good practice to move away from these types of patterns.

for Hide warning, you should add showCircularDependencies as following to your .angular-cli.json:

 "defaults": {
    "build": {
      "showCircularDependencies": false
    }
  }
mojtaba ramezani
  • 1,461
  • 16
  • 15
  • 2
    Isn't this an error rather than just a warning, Angular won't be able to create these two services if it is deadlocked. – Ashish Ranjan Apr 30 '19 at 15:03
  • Why not use the "clasic solution" ? https://stackoverflow.com/questions/46832072/how-to-solve-the-circular-dependency – Eliseo Apr 30 '19 at 18:45