Error: NG0200: Circular dependency in DI detected

Question

Injecting a different service in an interceptor is giving the above mentioned error even though Iam not importing httpClient into the the service.

logger.interceptor.ts

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { LoginService } from './login.service';
import { TempService } from './temp.service';
import { TokenService } from './tokenser.service';

export const loggerInterceptor: HttpInterceptorFn = (req, next) => {
  console.log("Executing logger Interceptor");
  let authReq = req;
  const token = inject(TempService).getToken();
  //localStorage.getItem("token_exam_portal");
  console.log("Token:" +token);
  if (token != null) {
    //if token exists then add the token as header to the http request
    authReq = authReq.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
  }
  return next(authReq);
};

the above interceptor is using the getToken method of TempService to get the token

temp.service.ts

import {Injectable, NgModule } from "@angular/core";


@NgModule({
    
})


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

     //get token
  public getToken() {
    return localStorage.getItem("token_exam_portal");
  }
}

login.component.ts

import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule} from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
import { MatCardModule } from '@angular/material/card';
import { LoginService } from '../../services/login.service';
import { UserService } from '../../services/user.service';
import { TempService } from '../../services/temp.service';
import { LoginHTTPService } from '../../services/login-http.service';



@Component({
 selector: 'app-login',
 standalone: true,
 imports: [MatInputModule, MatFormFieldModule, MatButtonModule, FormsModule,MatSnackBarModule,MatCardModule],
 providers:[MatSnackBar,LoginService,UserService,TempService],
 templateUrl: './login.component.html',
 styleUrl: './login.component.css'
})
export class LoginComponent {

 loginData={
   username:"",
   password:""
 };

 constructor(private snack:MatSnackBar, private login:LoginService,private temp:TempService, private loginHttp:LoginHTTPService){}

 formSubmit(){
   console.log('login button clicked '+this.loginData.username+', '+this.loginData.password);
   if(this.loginData.username.trim() == '' || this.loginData.username == null){
     this.snack.open("Username cannot be null!","ok",{
       duration:3000,
     });
     return;
   }

   if(this.loginData.password.trim() == '' || this.loginData.password == null){
     this.snack.open("Password field cannot be null!","ok",{
       duration:3000,
     });
     return;
   }

   // request server to generate token
   this.loginHttp.generateToken(this.loginData)
   .subscribe({
     next:(data:any)=>{
       console.log('success');
       console.log(data);

       //token has been successfully created
       this.login.loginUser(data.token);
       this.loginHttp.getCurrentUser().subscribe({
         next:(user:any)=>{
           this.login.setUser(user);
           console.log(user);
           //redirect... ADMIN : admin dashboard
           //redirect... NORMAL : normal dashboard
         }
       })
     },
     error:(error:any)=>{
       console.log("Error "+ error);
     }
   });

 }
}

login.service.ts

import { Injectable} from '@angular/core';
import { Subject } from 'rxjs';


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

  // private http: HttpClient;
  // constructor(httpBackend:HttpBackend) {
  //   this.http = new HttpClient(httpBackend);
  //  }
  // constructor(private loginHttp:LoginHTTPService) {

  // }

  public loginStatusSubject=new Subject<boolean>();

  constructor() {

  }
  //get current user
  // public getCurrentUser<user>() {
  //   return this.loginHttp.getCurrentUser();
  // }

  //login user: set token in local storage
  public loginUser(token: string) {
    localStorage.setItem("token_exam_portal", token);
    return true;
  }

  //isLogin: whether user is logged in or not
  public isLoggedIn() {
    let tokenStr = localStorage.getItem("token_exam_portal");
    if (tokenStr == undefined || tokenStr == '' || tokenStr == null) {
      return false;
    }
    return true;
  }

  //logout: remove token_exam_portal from the local storage
  public logout() {
    localStorage.removeItem("token_exam_portal");
    localStorage.removeItem("user");
    this.loginStatusSubject.next(false);
    return true;
  }

  //get token
  public getToken() {
    return localStorage.getItem("token_exam_portal");
  }

  //set user deatails
  public setUser(user: any) {
    localStorage.setItem('user', JSON.stringify(user));
  }

  //get user
  public getUser() {
    let userStr = localStorage.getItem("user");
    if (userStr != null) {
      return JSON.parse(userStr);
    }
    else {
      this.logout();
      return null;
    }
  }
  // get user role
  public getUserRole() {
    let user = this.getUser();
    return user.authorities[0].authority;// returns only first role
  }
}

login-httpService.ts

import { HttpClient } from "@angular/common/http";
import { Injectable, NgModule } from "@angular/core";
import baseUrl from "./helper";


@Injectable({
    providedIn: 'root'
})
export class LoginHTTPService {
    constructor(private http: HttpClient) {

    }

    //generate token
    public generateToken(loginData: any) {
        console.log("genrate Token start from loginhttp");
        return this.http.post(`${baseUrl}/generate-token`, loginData);

    }

    //get current user
    public getCurrentUser() {
        return this.http.get(`${baseUrl}/current-user`);
    }
}

Error in the console

I understand if the tempService had an HttpClient it can give this error. But even when not importing, it is giving the Circular Dependeny Error