Exciting News!! Angular 10 Update: Detecting a Circular Dependency When Injecting a Service into a Specific Module. What Sets @Inject Apart from providers[ ]?

Question

Exciting News!! Angular 10 Update: Detecting a Circular Dependency When Injecting a Service into a Specific Module. What Sets @Inject Apart from providers[ ]?

I'm trying to integrate my countries.service into my pricing.module and utilize it within the list-pricing component of that module. However, I encountered a circular dependency issue. https://i.sstatic.net/iNepg.jpg

This is how my module looks like

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 { }

https://i.sstatic.net/xFnAp.jpg
Here is the list-pricing 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;

      })    

 }
}

https://i.sstatic.net/UKR34.jpg Pricing-routing.module content

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 {}

https://i.sstatic.net/RUnHg.jpg Error Encountered: https://i.sstatic.net/DqJYx.jpg

UPDATE !! I managed to resolve the issue by switching the syntax from @Injectable({ provideIn:....}) in the service to using providers [] in my module instead. Still uncertain about the difference between them though.

javascript angular typescript dependency-injection service

Answer 1

Answer №1

While scrolling through the depths of Angular github, I came across an intriguing issue that caught my attention. It seems like a circular dependency check is causing some trouble. One solution proposed was to add providers:[CountriesService] in pricing.module.ts.

Alternatively,

You could create a new module to tackle this circular dependency check enforced by the TypeScript compiler.

Personally, I'd recommend sticking with the providers syntax instead of diving into creating a whole new module.

Answer 2

While scrolling through the depths of Angular github, I came across an intriguing issue that caught my attention. It seems like a circular dependency check is causing some trouble. One solution proposed was to add providers:[CountriesService] in pricing.module.ts.

Alternatively,

You could create a new module to tackle this circular dependency check enforced by the TypeScript compiler.

Personally, I'd recommend sticking with the providers syntax instead of diving into creating a whole new module.

Answer 3

Answer №2

Typically, in about 99% of cases, the providedIn value should be 'root' to ensure tree shakeability. This means that if a service is not used anywhere in the app, it will not be included in the final compiled bundle.

If a service has application scope, use the following syntax:

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

For module scope, add the service to the providers array of the module.

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

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

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

Remember to replace the module and service names with your own.

For component scope, include the service in the component metadata.

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

Answer 4

Typically, in about 99% of cases, the providedIn value should be 'root' to ensure tree shakeability. This means that if a service is not used anywhere in the app, it will not be included in the final compiled bundle.

If a service has application scope, use the following syntax:

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

For module scope, add the service to the providers array of the module.

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

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

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

Remember to replace the module and service names with your own.

For component scope, include the service in the component metadata.

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

Answer 5

Answer №3

You can attempt eliminating

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

from countries.service, as it appears to be the root of the circular dependency issue.

Answer 6

You can attempt eliminating

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

from countries.service, as it appears to be the root of the circular dependency issue.

Exciting News!! Angular 10 Update: Detecting a Circular Dependency When Injecting a Service into a Specific Module. What Sets @Inject Apart from providers[ ]?

Answer №1

Answer №2

Answer №3

Similar questions

An effective way to prevent right-clicking on iframes across all websites

Is it better to use AngularJS' ngMock inject before each test or for each individual test case?

Retain annotations for assigned types in d.ts files

Next.js: An absence of response is observed when a high volume of requests is made on a server-side rendering page with

Using aliased imports is no longer an option when setting up a new TypeScript React application

If the width of the table is set to 100% in the CSS, the legend in the Flot chart will automatically shift to the

Do you need to discontinue a live connection?

What is the best way to determine if a variable exists within an array in Angular and JavaScript?

When you scroll a fixed element on the page, the block is truncated

Achieving the mat-primary color in Angular Material 18

The i18next.t function is returning an undefined value

Collaboratively accessing a shared constant in two separate JavaScript files

Utilizing PrimeNG radio buttons for selecting multiple items simultaneously

Is it possible to utilize multiple useMutation hooks within a single component?

Differences between HTML Markup in PHP and Javascript

Implementing object binding for multiple properties in Angular: A comprehensive guide

What is the best way to delete a CSS class from a specific element in a list using React?

"Encountering a blank page in React Router when transitioning between separate projects

An issue occurred when trying to access the version information from http://localhost:8088/web/webclient/version_info while logging in to the Odoo server using

Different ways to incorporate the div element with text content as opposed to images in ngx-slick-carousel