I am working on angular project where I have a service that gets the data from an API.

The service code:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

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

  constructor(public _HttpClient: HttpClient) { }

  getUsers(): Observable<any> {
    return this._HttpClient.get(`http://localhost:1234/labsystem/public/api/users`);
  }
}

And I am injecting the service in the component I need to view the users in it.

The component code:

import { Component, OnInit } from '@angular/core';
import { CustomersService } from 'src/app/customers.service';

@Component({
  selector: 'app-all',
  templateUrl: './all.component.html',
  styleUrls: ['./all.component.scss']
})
export class AllComponent implements OnInit {

  allUsers: any;

  constructor(public _CustomersService: CustomersService) {
    _CustomersService.getUsers().subscribe((data) => {
      this.allUsers = data;
    }, (error) => { console.log(error) });
  }

  ngOnInit(): void {
  }

}

The error in the browser console:

ERROR Error: NG0200: Circular dependency in DI detected for CustomersService. Find more at https://angular.io/errors/NG0200