Home > database >  this.interceptor.intercept is not a function Angular 13
this.interceptor.intercept is not a function Angular 13

Time:03-10

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

CodePudding user response:

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

  • Related