CODEWITHSUNDEEP
javascriptangulartypescriptdependency-injectionservice
Hssan Bouzlima
Hssan Bouzlima

Reputation: 93

Update !! Angular 10 : Injecting a service to a specific module , circular dependency detected. Difference between @inject and providers[ ]?

I want to inject my service countries.service to my module pricing.module and use it in list-pricing component of that module. I got circular dependency detected . This is my service

This is my module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PricingRoutingModule } from './pricing-routing.module';
import { DetailsPricingComponent } from './details-pricing/details-pricing.component';
import { ListPricingComponent } from './list-pricing/list-pricing.component';



@NgModule({
  declarations: [DetailsPricingComponent, ListPricingComponent],
  imports: [
    CommonModule,
    PricingRoutingModule,
  
  ],
})
export class PricingModule { }

This is my module
This is list-pricing a component from my module

import { Component, OnInit } from '@angular/core';
import { Post } from 'src/app/Interfaces/post';
import { CountriesService } from 'src/app/services/countries.service';
@Component({
  selector: 'app-list-pricing',
  templateUrl: './list-pricing.component.html',
  styleUrls: ['./list-pricing.component.css'],
})
export class ListPricingComponent {
  result:Array<Post>;
  constructor(private service:CountriesService) { }

  ngOnInit(): void {  
     this.service.getCountries().subscribe(data=> 
        {  
     console.log("hello") 
          this.result=data;

      })    

 }
}

This is list-pricing a component from my module Pricing-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DetailsPricingComponent } from './details-pricing/details-pricing.component';
import { ListPricingComponent } from './list-pricing/list-pricing.component';

const routes: Routes = [
  { path: '', component: ListPricingComponent },
  { path: 'detailsPricing', component: DetailsPricingComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PricingRoutingModule {}

enter image description here This is the error This is the error

UPDATE !! It worked fine when I change the syntax from @Injectable({ provideIn:....}) in service , to providers [] in my module . I don't know what is the difference between them ?

Upvotes: 1

Views: 1758

Answers (3)

Shashank Vivek
Shashank Vivek

Reputation: 17514

Ok, so I stumbled upon this issue in Angular github which talks about something similar. From what I understood, either use providers:[CountriesService] in pricing.module.ts

OR

create another module to break this circular dependency check which seems to be done Typescript compiler.

My suggestion is not to get into creating a new module but rather stick to the providers syntax.

Upvotes: 1

Allah-The-Dev
Allah-The-Dev

Reputation: 57

Usually and 99% of the time providedIn value should be 'root', so that becomes tree shakable, it means if it is not used anywhere in app, it'll not be included in final compiled bundle.

Use below syntax, if it have application scope :

@Injectable({
  providedIn: 'root',
})
export class CountriesService {
}

For module scope, put it in providers array of module.

import { Injectable, NgModule } from '@angular/core';

@Injectable()
export class Service {
  doSomething(): void {
  }
}

@NgModule({
  providers: [Service],
})
export class ServiceModule {
}

Replace your module and services name.

For component scope, put it in component metadata.

Helpful links : https://angular.io/guide/dependency-injection-providers#creating-tree-shakable-providers

Upvotes: 0

maxkart
maxkart

Reputation: 667

Try removing

import {PricingModule} from '../pricing/pricing.module';

from countries.service .. which I suspect is causing the circular dependency.

Upvotes: 0

Related Questions