Following is my interceptor code,

api.interceptor.ts

`

    import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
    
    import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs';

 @Injectable()
 export class ApiInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

      // Update the last access time for every request.
      console.log('reached');
      return next.handle(req);
     }
  }

`

app.module.ts,

` 
  imports: [HttpClientModule],
  Providers: [ {provide: HTTP_INTERCEPTORS, useClass: ApiInterceptor, multi: true}]`

Api.service.ts,

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

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


    constructor(private httpClient:HttpClient) {

     }

   loadConfig(payload:IWorkflowPayload):Promise<IFrameConfigResponse> {
      return this.httpClient.post<any>(this.serverUrl+'/test',payload, { headers: this.headers }).toPromise();
     }`

I do not where I had done wrong but when I load my app i see the interceptor is being called at any time. Can any one please suggest me the changes I have to do on my code. Thanks.