TypeError: _this.handler.handle is not a function error

Question

I am getting this error that this.handler.handle is not a function in my unit testing in Angular 6 using karma/jasmine. This error comes up in my command line when I type the 'ng test' command in my project folder.

Chrome 67.0.3396 (Windows 10.0.0) AppComponent should create FAILED    
Failed: _this.handler.handle is not a function
TypeError: _this.handler.handle is not a function

for a test that should create AppComponent here is my .spec file

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule, FormBuilder } from '@angular/forms';
import { HttpClientModule, HttpClient, HttpHandler } from '@angular/common/http';
describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, RouterTestingModule, HttpClientModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      declarations: [AppComponent],
      providers: [HttpClientModule, HttpClient, HttpHandler]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', async(() => {
    expect(component).toBeTruthy();
  }));
});

And here is my app.component.ts file

import { Component, ViewChild, OnInit } from '@angular/core';
import { AuthorizationService } from 'src/app/authorization.service';
import { Router } from '@angular/router';
import { MdcDrawer } from '@angular-mdc/web';
import { tap, catchError } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild(MdcDrawer) sidenav: MdcDrawer;
  flip = false;

  constructor(private router: Router, private authorizationService: AuthorizationService) {
    this.authorizationService.getAuthorization().subscribe();
  }

  toggleState() {
    if (this.flip) {
      this.flip = false;
    } else {
      this.flip = true;
    }
  }

  goToPage(route: String) {
    this.router.navigate([route]).catch(err => {
      console.log(err);
    });
    this.sidenav.close();
  }

  close() {
    console.log('CLOSE');
    this.sidenav.close();
  }
}

And here is my app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@angular/cdk/layout';
import * as MATERIAL_MODULES from '@angular/material/';
import * as MDC_MODULES from '@angular-mdc/web';
import { TrackUpdateComponent } from './track-update/track-update.component';
import { TrackUpdatePromptComponent } from './track-update-prompt/track-update-prompt.component';
import { NavigationBarComponent } from './navigation-bar/navigation-bar.component';
import { ActionToolbarComponent } from './action-toolbar/action-toolbar.component';
import { SaveButtonToolbarComponent } from './save-button-toolbar/save-button-toolbar.component';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { EquipmentCardComponent } from './equipment-card/equipment-card.component';
import { EquipmentCardListComponent } from './equipment-card-list/equipment-card-list.component';
import { ListOptionsComponent } from './list-options/list-options.component';
import { EquipmentCardLoadingComponent } from './equipment-card-loading/equipment-card-loading.component';
import { GoToTopComponent } from './go-to-top/go-to-top.component';
import { TapActionListComponent } from './tap-action-list/tap-action-list.component';
import { JumpActionComponent } from './jump-action/jump-action.component';
import { GlobalErrorsComponent } from './global-errors/global-errors.component';
import { SwitchActionListComponent, AssignTrackForm } from './switch-action-list/switch-action-list.component';
import { AddActionComponent } from './add-action/add-action.component';
import { ErrorHandler } from './global-errors/error_handler';
import { RequestInterceptor } from './global-errors/http_interceptor';
import { ActionService } from './action.service';
import { TrackIdService } from './track-id-service.service';
import { TrackInquiryService } from './track-inquiry.service';
import { UserPreferenceService } from './user-preference.service';
import { AuthorizationService } from './authorization.service';
import { EquipmentInsertCardComponent } from './equipment-insert-card/equipment-insert-card.component';
import { LoadingIconComponent } from './loading-icon/loading-icon.component';

@NgModule({
  declarations: [
    AppComponent,
    TrackUpdatePromptComponent,
    NavigationBarComponent,
    TrackUpdateComponent,
    ActionToolbarComponent,
    SaveButtonToolbarComponent,
    EquipmentCardComponent,
    EquipmentCardListComponent,
    ListOptionsComponent,
    EquipmentCardLoadingComponent,
    GoToTopComponent,
    TapActionListComponent,
    JumpActionComponent,
    GlobalErrorsComponent,
    SwitchActionListComponent,
    AssignTrackForm,
    AddActionComponent,
    EquipmentInsertCardComponent,
    LoadingIconComponent
  ],
  entryComponents: [GlobalErrorsComponent, AssignTrackForm],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    LayoutModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    MDC_MODULES.MdcButtonModule,
    MDC_MODULES.MdcCheckboxModule,
    MDC_MODULES.MdcFormFieldModule,
    MDC_MODULES.MdcToolbarModule,
    MDC_MODULES.MdcIconModule,
    MDC_MODULES.MdcListModule,
    MDC_MODULES.MdcSelectModule,
    MDC_MODULES.MdcAppBarModule,
    MDC_MODULES.MdcIconToggleModule,
    MDC_MODULES.MdcDrawerModule,
    MDC_MODULES.MdcTextFieldModule,
    MDC_MODULES.MdcDialogModule,
    MATERIAL_MODULES.MatButtonModule,
    MATERIAL_MODULES.MatCheckboxModule,
    MATERIAL_MODULES.MatMenuModule,
    MATERIAL_MODULES.MatIconModule,
    MATERIAL_MODULES.MatTableModule,
    MATERIAL_MODULES.MatCardModule,
    MATERIAL_MODULES.MatInputModule,
    MATERIAL_MODULES.MatSelectModule,
    MATERIAL_MODULES.MatToolbarModule,
    MATERIAL_MODULES.MatListModule,
    MATERIAL_MODULES.MatTooltipModule,
    MATERIAL_MODULES.MatSortModule,
    MATERIAL_MODULES.MatDialogModule,
    MATERIAL_MODULES.MatSlideToggleModule,
    MATERIAL_MODULES.MatSidenavModule,
    MATERIAL_MODULES.MatAutocompleteModule,
    MATERIAL_MODULES.MatSnackBarModule,
    MATERIAL_MODULES.MatExpansionModule
  ],
  providers: [
    HttpModule,
    HttpClientModule,
    HttpClient,
    ErrorHandler,
    ActionService,
    TrackIdService,
    TrackInquiryService,
    UserPreferenceService,
    AuthorizationService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RequestInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Can someone please help with this? I would appreciate it.

Solution 1

For me, this issue came from trying to include HttpClient and HttpHandler in my providers in TestBed.configureTestingModule like so:

providers: [
    HttpClient,
    HttpHandler
]

This kept throwing errors along the lines of _TypeError: this.handler.handle is not a function

To fix this, I found I could remove HttpClient and HttpHandler from the providers and instead add HttpClientTestingModule to my imports like so:

imports: [
    HttpClientTestingModule
]

This solved this particular error for me in my Karma unit tests in Angular 7.

Solution 2

I found that adding the below after my last IT statement fixed the issue for me.

afterEach(() => {
    TestBed.resetTestingModule();
});

Comments

[Tony]

I had to add the suggested 'HttpClientTestingModule' (thank you!) AND keep the 'HttpClient' in providers.