this.interceptor.intercept is not a function Angular 8

Question

I'm trying to implement jsonwebtokens in my Angular project and for that purpose I'm using an HttpInterceptors. Unfortunately I'm facing the following error:

this.interceptor.intercept is not a function

I've already searched over other Stackoverflow threads in order to apply their solutions, but so far I was not able to make it work.

Here is my TokenInterceptorService

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

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {

  constructor() { }
  intercept(req, next) {
    let tokenizedReq = req.clone({
      setHeaders: {
        Authorization: 'Bearer xx.yy.zz'
      }
    });
    return next.handle(tokenizedReq)
  }
}

and here is my app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
// import { MatButtonModule } from '@angular/material/button';
import { MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { MatSelectModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import 'hammerjs';

import { FuseModule } from '@fuse/fuse.module';
import { FuseSharedModule } from '@fuse/shared.module';
import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';

import { fuseConfig } from 'app/fuse-config';

import { AppComponent } from 'app/app.component';
import { LayoutModule } from 'app/layout/layout.module';
import { SampleModule } from 'app/main/sample/sample.module';
import { AddSalesPersonComponent } from './layout/components/Sales/add-sales-person/add-sales-person.component';
import { LoginComponent } from './layout/components/login/login.component';
import { MasterLayoutComponent } from './master-layout/master-layout.component';
import { NewLoanComponent } from './layout/components/loan/new-loan/new-loan.component';
import { ListSalesComponent } from './layout/components/Sales/list-sales/list-sales.component';
import { NewCustomerComponent } from './layout/components/customer/new-customer/new-customer.component';
import { CustomerListComponent } from './layout/components/customer/customer-list/customer-list.component';
import { NewOrganizationComponent } from './layout/components/organization/new-organization/new-organization.component';
import { ListOrganizationComponent } from './layout/components/organization/list-organization/list-organization.component';
import { NewProductComponent } from './layout/components/products/new-product/new-product.component';
import { ProductListComponent } from './layout/components/products/product-list/product-list.component';
import { NewAdminComponent } from './layout/components/admin/new-admin/new-admin.component';
import { ListAdminComponent } from './layout/components/admin/list-admin/list-admin.component';
import { LoanListComponent } from './layout/components/loan/loan-list/loan-list.component';
import { ReceivePaymentComponent } from './layout/components/payments/receive-payment/receive-payment.component';
import { MakePaymentComponent } from './layout/components/payments/make-payment/make-payment.component';
import { AuthGuard } from './guards/auth.guard';
import { TokenInterceptorService } from './services/token/token-interceptor.service';

const appRoutes: Routes = [
    {
        path: '',
        component: MasterLayoutComponent,
        children: [
            {
                path: '',
                redirectTo: '/login',
                pathMatch: 'full'
            },
            {
                path: 'saveSalesPerson',
                component: AddSalesPersonComponent
            },
            {
                path: 'searchsalesperson',
                component: ListSalesComponent
            },
            {
                path: 'newcustomer',
                component: NewCustomerComponent
            },
            {
                path: 'searchcustomer',
                component: CustomerListComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'neworganization',
                component: NewOrganizationComponent
            },
            {
                path: 'searchorganization',
                component: ListOrganizationComponent
            },
            {
                path: 'newproduct',
                component: NewProductComponent
            },
            {
                path: 'searchpoduct',
                component: ProductListComponent
            },
            {
                path: 'newloan',
                component: NewLoanComponent
            },
            {
                path: 'searchLoan',
                component: LoanListComponent
            },
            {
                path: 'newadmin',
                component: NewAdminComponent
            },
            {
                path: 'searchadmin',
                component: ListAdminComponent
            },
            {
                path: 'receivePayments',
                component: ReceivePaymentComponent
            },
            {
                path: 'makePayments',
                component: MakePaymentComponent
            },
        ]
    },
    {
        path: 'login',
        component: LoginComponent,
    },

    {
        path: '**',
        redirectTo: 'salesperson'
    }
];

@NgModule({
    imports: [
        BrowserModule,
        FlexLayoutModule,
        MatButtonModule,
        MatFormFieldModule,
        FormsModule,
        MatInputModule,
        MatRippleModule,
        MatSelectModule,
        BrowserAnimationsModule,
        HttpClientModule,
        MatDialogModule,
        RouterModule.forRoot(appRoutes),

        TranslateModule.forRoot(),

        // Material moment date module
        MatMomentDateModule,

        // Material
        MatButtonModule,
        MatIconModule,

        // Fuse modules
        FuseModule.forRoot(fuseConfig),
        FuseProgressBarModule,
        FuseSharedModule,
        FuseSidebarModule,
        FuseThemeOptionsModule,

        // App modules
        LayoutModule,
        SampleModule
    ],
    declarations: [
        AppComponent,
        MasterLayoutComponent
    ],
    exports: [
        MatButtonModule,
        MatFormFieldModule,
        MatInputModule,
        MatRippleModule,

    ],
    bootstrap: [
        AppComponent
    ],
    providers: [AuthGuard, {
        provide: HTTP_INTERCEPTORS,
        useClass: TokenInterceptorService,
        multi: true
    }, { provide: MatDialogRef, useValue: {} },
    ]

})
export class AppModule {
}

For the sake of checking, I'm hard coding the temporary token, but I will implement the real one once I solve this issue.

Answer 1

Since you are manually providing the Interceptor in your app.module.ts give it a try to this:

@Injectable()

instead of

@Injectable({
  providedIn: 'root'
})

Also in the interceptor check if all the dependencies are correctly imported and last but not least please don't forget to use types (this one is not related to your issue, just a friendly advice)

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

@Injectable()
export class TokenInterceptorService implements HttpInterceptor {
  constructor() {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(request);
  }
}