title: TypeError: _this.handler.handle is not a function error
body: <p>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. </p>
  
  <pre><code>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
  </code></pre>
  
  <p>for a test that should create AppComponent here is my .spec file</p>
  
  <pre><code>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', () =&gt; {
    let component: AppComponent;
    let fixture: ComponentFixture&lt;AppComponent&gt;;
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [FormsModule, RouterTestingModule, HttpClientModule],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        declarations: [AppComponent],
        providers: [HttpClientModule, HttpClient, HttpHandler]
      }).compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(AppComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', async(() =&gt; {
      expect(component).toBeTruthy();
    }));
  });
  </code></pre>
  
  <p>And here is my app.component.ts file </p>
  
  <pre><code>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 =&gt; {
        console.log(err);
      });
      this.sidenav.close();
    }
  
    close() {
      console.log('CLOSE');
      this.sidenav.close();
    }
  }
  </code></pre>
  
  <p>And here is my app.module.ts file: </p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p>Can someone please help with this? I would appreciate it. </p>