Circular dependency detected in Angular 7

14,768

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

Share:
14,768
Pritam Bohra
Author by

Pritam Bohra

Updated on June 24, 2022

Comments

  • Pritam Bohra
    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
    Pritam Bohra almost 5 years
    how do I use that service in the same module i.e. in DashboardChild1 component??
  • Derviş Kayımbaşıoğlu
    Derviş Kayımbaşıoğlu almost 5 years
    I 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
    Pritam Bohra almost 5 years
    I am trying to practice what's mentioned on this link angular.io/guide/providers#providedin-and-ngmodules
  • Derviş Kayımbaşıoğlu
    Derviş Kayımbaşıoğlu almost 5 years
    this 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.