错误错误：未捕获（承诺）：错误：NG0200：检测到 DI 中的循环依赖

Question

I am working on an Angular app where I have 3 different components in the main app. I have 3 different services for each of the component. I am passing the data from component's service to the main service that is located in the main app, where I am fetching the data from the backend. And, sending the data back from the main app service to the component's service in order to model the data that I have fetched. While doing this I am getting an issue. Since, both of my services are somewhat dependent on each other I am getting an error of circular dependency. How can I resolve this?

Here's my code:

app.service.ts

import { ContactsService } from "./services/contacts.service";

constructor(private http: HttpClient, private contactsService: ContactsService){}
//I am getting an error probably due to creating an instance of contactsService

async postHTTPRequest(url: string)
{
const check = await this.readFile();
if(check == 1)
{
  this.tokenValue = "doJSUq6pR2RDgshFt9BYVmpzmRpTxVatuadEd5yV";
  this.http.post(this.baseURL+url, {token: this.tokenValue}).subscribe(response => {
    console.log(response);
    this.contactsService.modelData(response);
  })
}
}

contacts.service.ts

import { AppService } from "../app.service";

contactsURL: string = "/contact/getContacts";

constructor(private appService: AppService)
{
  this.appService.postHTTPRequest(this.contactsURL);
}

modelData(data: any)
{
  console.log("data received for modeling");
}

Any help would be appreciated. Thanks!

EDIT: I have tried using a static function that can be called without creating any instance but, it results in getting an error when I have to pass the data from the static function to a non static function in order to use it in my component.html file. Also, global variable is not getting initialized with the data that the static function has.

contacts.service.ts

static modelData(dataToModel: any)
{
   //function definition
}

app.service.ts

this.http.post(this.baseURL+url {token:this.tokenValue})
 .subscribe(response => {
    ContactsService.modelData(response);
  }

Can anybody tell me how to resolve this?

Answer 1

app.service.ts

import { ContactsService } from "./services/contacts.service";

constructor(
   private http: HttpClient, 
   @Inject(ContactsService) private contactsService
){

}

contacts.service.ts

import { AppService } from "../app.service";

constructor(@Inject(AppService) private appService)
{
  
}

Answer 2

The error message is clear: you have a circular dependency in your services.

AppService needs ContactService but ContactService needs AppService. How could these services be constructed?

Note that some framework are sometimes able to workaround circular dependencies but Angular is apparently not in this case.

Circular dependency are often a sign of a poor design.

Solution: review your design to get rid of the circular dependency.

In your case IMHO, AppService should not depend on ContactService. You could pass a parser method as parameter to postHTTPRequest or even make it only return an Observable and let the caller deal with the result itself.