this.interceptor.intercept is not a function Angular 13

Issue

I am getting the error this.interceptor.intercept is not a function when doing a intercept in Angular 13.2.0. I simplified it as much as possible.

RecaptchaInterceptor.ts

import {throwError as observableThrowError,  Observable } from 'rxjs';
import {
    HttpRequest,
    HttpHandler,
    HttpEvent,

    HttpInterceptor
} from '@angular/common/http';
import { Injectable } from "@angular/core";

@Injectable()
export class RecaptchaInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(httpRequest);
  }
}


app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { RecaptchaInterceptor } from './Interceptor/authInterceptor';
import { SearchCompoment } from './Search/Search';
import { Recaptcha } from './Service/Recaptcha';
import { GoogleReCaptchaWebApi } from './WebApi/GoogleReCaptcha';

@NgModule({
  declarations: [
    AppComponent,
    SearchCompoment
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useValue: RecaptchaInterceptor,
    multi: true
  },
    GoogleReCaptchaWebApi, Recaptcha],
  bootstrap: [AppComponent]
})
export class AppModule { }

I am at a lost for why it doesn't work. I have done similar in an Angular 12 app without an issue and was wonder if this is possible an issue with version 13?

Thanks, James

Solution

In your module, instead of useValue: RecaptchaInterceptor, you need to write useClass: RecaptchaInterceptor, see Angular’s HTTP guide.

Answered By - JSON Derulo