angular - TypeError : _this. handler.handle不是函数错误

Question

我收到以下错误消息:在使用 karma/ Jasmine 的Angular 6单元测试中，this.handler.handle不是函数。当我在项目文件夹中键入“ng test”命令时，在命令行中会出现此错误。

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

对于应该创建AppComponent的测试，这是我的.spec文件

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();
  }));
});

这是我的app.component.ts文件

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();
  }
}

这是我的app.module.ts文件:

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 {}

有人可以帮忙吗？我会很感激。

Answer 1

对我而言，此问题来自尝试将HttpClient和HttpHandler包括在我的提供者的TestBed.configureTestingModule中，如下所示:

providers: [
    HttpClient,
    HttpHandler
]

这一直沿 _TypeError: this.handler.handle is not a function的行抛出错误

要解决此问题，我发现我可以从提供程序中删除 HttpClient和 HttpHandler，而是将 HttpClientTestingModule添加到我的导入中，如下所示:

imports: [
    HttpClientTestingModule
]

这在Angular 7的Karma单元测试中为我解决了这个特殊错误。