Circular dependency detected in Angular 7

angular angular-services angular-ngmodel angular-module
Pritam Bohra picture Pritam Bohra · Jan 7, 2019 · Viewed 12k times · Source

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?

Answer

Derviş Kayımbaşıoğlu picture Derviş Kayımbaşıoğlu · Jan 7, 2019

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
...
...
...
...

Related questions

@HostBinding and @HostListener: what do they do and what are they for?

In my meanderings around the world wide interweb, and now especially the angular.io style docs, I find many references to @HostBinding and @HostListener. It seems they are quite fundamental, but unfortunately the documentation for them at the moment is …

Read More
Angular: 'Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays'

I've created an angular app which gets data from a json file. But I'm having issues with showing the data in html. A lot of variables are in dutch, I'm sorry for that. I'm also a bit new to all …

Read More
Angular 4+ ngOnDestroy() in service - destroy observable

In an angular application we have ngOnDestroy() lifecycle hook for a component / directive and we use this hook to unsubscribe the observables. I want to clear / destory observable that are created in an @injectable() service. I saw some posts saying …

Read More