Circular dependency Error in /turbo_modules/@angular/compiler@9.1.4/bundles/compiler.umd.js...

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/compiler@9.1.4/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

Continue reading...