Circular dependency Error in /turbo_modules/@angular/[email protected]/bundles/compiler.umd.js (2845:21) Can't resolve all parameters for BService: (?)

Question

A-Service.component.ts

` import { Injectable, Inject } from '@angular/core'; import { BService } from './BService';

@Injectable({
  providedIn: 'root',
})
export class AService {
  constructor(private bService: BService) {}

  getMessageFromB(): string {
    return this.bService.getMessage();
  }

  getMessage(): string {
    return 'Message from AService';
  }
}
B-service.component.ts
---------------------
import { Injectable, Inject } from '@angular/core';
import { AService } from './AService';

@Injectable({
  providedIn: 'root',
})
export class BService {
  constructor(private aService: AService) {}

  getMessageFromA(): string {
    return this.aService.getMessage();
  }

  getMessage(): string {
    return 'Message from BService';
  }
}
app.component.ts
-------------------
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AService, BService],
})
export class AppComponent {
  messageFromB: string = '';
  messageFromA: string = '';

  constructor(
    private readonly aService: AService,
    private readonly bService: BService
  ) {}

  ngOnInit() {
    this.messageFromB = this.aService.getMessageFromB();
    this.messageFromA = this.bService.getMessageFromA();
  }
}
HTML
------------------
<p>{{ messageFromB }}</p>    
<p>{{ messageFromA }}</p>    `

When I run this I get the below error
---------------------------------------------
Error in /turbo_modules/@angular/[email protected]/bundles/compiler.umd.js (2845:21)
Can't resolve all parameters for BService: (?).

I am trying to print the message using HTML as below. I am expecting HTML to print the message , but as my services are having circular dependency I am getting the said error

AService depends on BService and BService does on AService. That is why you are getting error: circular dependency in DI detected. You need to break this loop (or circle) of dependency to resolve this error. — Ajeet Shah
– Ajeet Shah, Commented Jan 14 at 20:58

Gykonik · Accepted Answer · 2025-01-14 21:07:50Z

0

As Ajeet Shah already pointed out, you've got a circular dependency, meaning AService depends on BService and vice versa, which doesn't make sense and causes a loop/circle.

If you need some sort of mutual connection, then I'd recommend introducing another CService that handles the "communication" and breaks out of the loop. So AService -> CService and Bservice -> CServiceS

answered Jan 14 at 21:07

Gykonik

6861 gold badge9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aishwarya Gharde Jan 16 at 19:13

Do you think it will make sense if we remove the circular dependency and individually have getMessage independent function in Each A and B service. Which will in turn return the message from both the services. This might eliminate circular dependency

Gykonik Jan 16 at 23:05

I'm not sure what you are trying to accomplish with Service A and B having a method that basically just prints B respectively A. Maybe you can elaborate on that and I'll try to help

Aishwarya Gharde Jan 21 at 9:04

trying to understand is there a way we can resolve circular dependency

Gykonik Jan 21 at 16:45

Circular dependencies have no sense and will never be possible. If A depends on B and B on A, how do you want to resolve this? The only way to resolve is is by (a) reworking your logic and ensure that its really necessary and (b) if its REALLY necessary, introduce some parent service that manages the shared state.

Collectives™ on Stack Overflow

Circular dependency Error in /turbo_modules/@angular/[email protected]/bundles/compiler.umd.js (2845:21) Can't resolve all parameters for BService: (?)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related