title: this.interceptor.intercept is not a function Angular 8
body: <p>I'm trying to implement <code>jsonwebtokens</code> in my Angular project and for that purpose I'm using an <code>HttpInterceptors</code>. Unfortunately I'm facing the following error:</p>
  
  <blockquote>
    <p>this.interceptor.intercept is not a function</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>Here is my <code>TokenInterceptorService</code></p>
  
  <pre><code>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)
    }
  }
  
  </code></pre>
  
  <p>and here is my <code>app.module.ts</code></p>
  
  <pre><code>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 {
  }
  
  </code></pre>
  
  <p>For the sake of checking, I'm hard coding the temporary token, but I will implement the real one once I solve this issue.</p>