Circular dependency detected in Angular 7
Solution 1
This is most likely to happen since
DashboardChild1 is a member of DashboardModule and DashboardChild1 trying to access DashboardModule by injectible. The result is Cirular Dependency.
DashboardModule calls DashboardChild1
DashboardChild1 calls DashboardModule
DashboardModule class DashboardChild1
DashboardChild1 calls DashboardModule
...
...
...
...
the same is also valid for DashboardService
DashboardModule calls DashboardChild1 calls DashboardService
DashboardService calls DashboardModule
DashboardModule calls DashboardChild1 calls DashboardService
DashboardService calls DashboardModule
...
...
...
...
Solution 2
As seen in this blog post: https://medium.com/@tomastrajan/total-guide-to-angular-6-dependency-injection-providedin-vs-providers-85b7a347b59f
You could pull out the DashboardService
into its own module DashboardServiceModule
. Then import that into DashboardModule
and use it in your DashboardChild(ren)
.
Pritam Bohra
Updated on June 24, 2022Comments
-
Pritam Bohra over 1 year
I have the following app structure in my Angular 7 app:
AppModule DashboardModule DashboardChild1 DashboardChild2 DashboardChild3 DashboardService AdminModule AdminChild1 AdminChild2 AdminChild3
and I want to have DashboardService available only in the
DashboardModule
, so I followed this link providedin-and-ngmodules.Here's my
DashboardService
:import { Injectable } from '@angular/core'; import { DashboardModule } from './dashboard.module'; @Injectable({ providedIn: DashboardModule }) export class DashboardService { ....... }
I have used that service in DashboardChild1 component, but it is giving the following error:
WARNING in Circular dependency detected: src/app/dashboard/dashboard-child1/dashboard-child1.component.ts -> src/app/dashboard/dashboard.service.ts -> src/app/dashboard/dashboard.module.ts -> src/app/dashboard/dashboard-routing.module.ts -> src/app/dashboard/dashboard-child1/dashboard-child1.component.ts
WARNING in Circular dependency detected: src/app/dashboard/dashboard-routing.module.ts -> src/app/dashboard/dashboard-child1/dashboard-child1.component.ts -> src/app/dashboard/dashboard.service.ts -> src/app/dashboard/dashboard.module.ts -> src/app/dashboard/dashboard-routing.module.ts
WARNING in Circular dependency detected: src/app/dashboard/dashboard.module.ts -> src/app/dashboard/dashboard-routing.module.ts -> src/app/dashboard/dashboard-child1/dashboard-child1.component.ts -> src/app/dashboard/dashboard.service.ts -> src/app/dashboard/dashboard.module.ts
WARNING in Circular dependency detected: src/app/dashboard/dashboard.service.ts -> src/app/dashboard/dashboard.module.ts -> src/app/dashboard/dashboard-routing.module.ts -> src/app/dashboard/dashboard-child1/dashboard-child1.component.ts -> src/app/dashboard/dashboard.service.ts
what am I missing here?
-
Pritam Bohra almost 5 yearshow do I use that service in the same module i.e. in DashboardChild1 component??
-
Derviş Kayımbaşıoğlu almost 5 yearsI believe that what you are trying to do is something extra-ordinary. Generally we do not use modules in services. I am not sure what you are trying to do. I believe that you need to clear your mind, think about what you need to do and ask a new question about it. I mean why do you need to inject your DashboardModule into DashboardService. DashboardModule holds definition of your module
-
Pritam Bohra almost 5 yearsI am trying to practice what's mentioned on this link angular.io/guide/providers#providedin-and-ngmodules
-
Derviş Kayımbaşıoğlu almost 5 yearsthis is completely different scenario, you can have user module, but this does not has components right? this is for provider registration. In your case, you are making recursion unintentionally.