HTTP Interceptor is not working in Angular 17 project

My AuthInterceptor.intercept method is not getting called. Putting all necessary codes below. My code flow: FormSubmit() method from login.component calls the generateToken() method from login.service() which makes a http.post request to server. Problem: Inerceptor is not executed before any http method. Thanks

app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';
import { HttpClient, HttpClientModule, provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations(),provideHttpClient(withInterceptorsFromDi()),]
};

login.component.ts

import { Component } from '@angular/core';
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';


@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){}

  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.login.generateToken(this.loginData)
    .subscribe({
      next:(data:any)=>{
        console.log('success');
        console.log(data);

        //token has been successfully created
        this.login.loginUser(data.token);
        this.login.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, NgModule } from '@angular/core';
import baseUrl from './helper';
import { HttpBackend, HttpClient } from '@angular/common/http';
import { authInterceptorProviders } from './auth.interceptor';



@NgModule({
  providers: [authInterceptorProviders],
})

@Injectable({
  providedIn: 'root'
})
export class LoginService {
  // private http: HttpClient;
  // constructor(httpBackend:HttpBackend) {
  //   this.http = new HttpClient(httpBackend);
  //  }
  constructor(private http:HttpClient) {

  }

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

  //generate token

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

  }

  //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");
    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
  }
}

auth.interceptor.ts

import { HTTP_INTERCEPTORS, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Component, Injectable, NgModule } from "@angular/core";
import { Observable } from "rxjs";
import { LoginService } from "./login.service";

const TOKEN_HEADER = 'Authorization';

@NgModule({
    providers: [LoginService],
})

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(private login: LoginService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        //add the jwt token
        console.log("Executing intercept method");
        
        let authReq = req;
        const token = this.login.getToken();
        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.handle(authReq);
    }
}

export const authInterceptorProviders = (
    {
        provide:HTTP_INTERCEPTORS,
        useClass:AuthInterceptor,
        multi: true,
    }
);

I am new to angular and I am unable to solve this basic issue. I have searched all over the internet but couldn't find any proper solution. please suggest. Thanks.

In standalone workspaces, it is recommended to use functional interceptors, which can be provided using the withInterceptors() function.

app.config.ts:

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor]))
  ],
};

interceptor:

export function authInterceptor(
  req: HttpRequest<unknown>,
  next: HttpHandlerFn): Observable<HttpEvent<unknown>> {

  // ...interceptor login
  return next(req);
}

For more information, see the official interceptors guide.