Menu
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?
275
In some scenarios, we can duplicate the required code and solve circular dependency. Or we can create a new service and move that code to that new service to avoid circular dependency.
A cyclic dependency exists when a dependency of a service directly or indirectly depends on the service itself. For example, if UserService depends on EmployeeService , which also depends on UserService . Angular will have to instantiate EmployeeService to create UserService , which depends on UserService , itself.
A cyclic dependency is an indication of a design or modeling problem in your software. Although you can construct your object graph by using property injection, you will ignore the root cause and add another problem: property injection causes Temporal Coupling. Instead, the solution is to look at the design closely.
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
...
...
...
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
