No suitable injection token for parameter 'loadingService' of class 'LoadingInterceptor'

Question

In my Angular-15 application I am implementing ngx-spinner.

Angular CLI: 15.2.0
Node: 18.14.2
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 15.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.0
@angular-devkit/build-angular   15.2.0
@angular-devkit/core            15.2.0
@angular-devkit/schematics      15.2.0
@schematics/angular             15.2.0
rxjs                            7.8.0
typescript                      4.9.5

I have already done this:

npm install ngx-spinner --save

I have already configured app-module.

loading.service.ts:

import { Injectable } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
@Injectable({
  providedIn: 'root',
})
export class LoadingService {
  loadingReqCount = 0;
  constructor(private spinnerService: NgxSpinnerService) {}
  loading() {
    this.loadingReqCount++;
    this.spinnerService.show(undefined, {
      type: 'ball-pulse-sync',
      bdColor: 'rgba(255,255,255,0.7)',
      /* color: '#333333' */
      color: '#FF0000',
    });
  }
  idle() {
    this.loadingReqCount--;
    if (this.loadingReqCount <= 0) {
      this.loadingReqCount = 0;
      this.spinnerService.hide();
    }
  }
}

loading.interceptor.ts:

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { LoadingService } from 'src/app/core/services/loading.service';
import { delay, finalize } from 'rxjs/operators';

@Injectable()

export class LoadingInterceptor implements HttpInterceptor {
    constructor(private loadingService: LoadingService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    this.loadingService.loading();
    return next.handle(request).pipe(
      delay(1000),  // delays for I second
      finalize(() => {
        this.loadingService.idle();
      })
    )
  }
}

But I have loadingService highlighted in

private loadingService: LoadingService

Then I have this error:

No suitable injection token for parameter 'loadingService' of class 'LoadingInterceptor'.
  Consider using the @Inject decorator to specify an injection token.(-992003)
loading.interceptor.ts(10, 41): This type does not have a value, so it cannot be used as injection token.

What exactly could be the problem and how do I resolve this?