Circular dependency error in angular 5

Question

Always I'm getting warning that is circular dependency

WARNING in Circular dependency detected:
src\app\auth\logout\logout.component.ts -> src\app\auth\_services\authentication.service.ts -> src\app\app.module.ts -> src\app\app-routing.module.ts ->
src\app\auth\logout\logout.component.ts

WARNING in Circular dependency detected:
src\app\theme\layouts\header-nav\header-nav.component.ts -> src\app\_services\data\emp.service.ts -> src\app\app.module.ts -> src\app\theme\layouts\layout.module.ts -> src\app\theme\layouts\header-nav\header-nav.component.ts

WARNING in Circular dependency detected:
src\app\theme\layouts\layout.module.ts -> src\app\theme\layouts\header-nav\header-nav.component.ts -> src\app\_services\data\emp.service.ts -> src\app\app.module.ts -> src\app\theme\layouts\layout.module.ts

WARNING in Circular dependency detected:
src\app\theme\theme-routing.module.ts -> src\app\auth\_guards\auth.guard.ts -> src\app\auth\_services\user.service.ts -> src\app\app.module.ts -> src\app\theme\theme-routing.module.ts

I used this then it was solved

"build": {
      "showCircularDependencies": false
    },

but how to solve this issue, without using "showCircularDependencies": false

Answer 1

I guess there's just no way around it. You probably would be able to escape this by breaking up one of these services into new a service and carefully include them.

Take a look at Single Responsibility Principle. It's the solid way of evading such issues.