Having Circular Dependcy issues

[umbral gazelle]

Seems to clear up if I remove HttpClient from the constructor

[boreal ember]

Here, we've removed the circular dependency by moving the PCService class to a separate file, and importing it into the component where it is being used. This way, the component is responsible for injecting the PCService class, and the PCService class does not need to inject the HttpClient service directly.

In this refactorized code, the component imports the PCService, and uses the service to make a call to the API, but it doesn't inject the HttpClient service, avoiding the circular dependency.

In a way you are right, This was one of the solutions I could think of to solve this circular dependency

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PC } from '../models/pc';
import { Component, OnInit } from '@angular/core';
import { PCService } from './pc.service';

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

readonly pcUrl = 'http://localhost:8080/api/v1/pc/';

constructor(private http: HttpClient) { }

PCById(id: number) {
    return this.http.get<PC>(this.pcUrl + 'find/' + id);
}
}

@Component({
selector: 'app-main-content',
templateUrl: './main-content.component.html',
styleUrls: ['./main-content.component.css']
})
export class MainContentComponent implements OnInit {

constructor(private pcService: PCService) { }

ngOnInit() {
this.pcService.PCById(1).subscribe(pc => {
console.log(pc);
});
}

}

[umbral gazelle]

So, that's how I have it set up:

[boreal ember]

Did the error still persist???

[umbral gazelle]

Yes.