TypeError：this._platformStrategy.getBaseHref 不是函数

Question

我正在尝试为我的 Angular 4/5 组件创建单元测试，其中我有很多导入。但是在导入 LocationStrategy 之后，我得到了一个：

TypeError: this._platformStrategy.getBaseHref 不是函数

当我从@angular/common 导入LocationStrategy 时显示。

有我的spec.ts 文件：

student.component.spec.ts

import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';

import {StudentComponent} from './student.component';
import {StudentService} from './student.service';
import {Student} from './student';
import {RecordsCount} from '../shared/entities/recordsCount';
import {Group} from '../groups/group';
import {GroupsService} from '../groups/groups.service';
import {NO_ERRORS_SCHEMA} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHandler } from '@angular/common/http';
import { OverlayModule } from '@angular/cdk/overlay';
import { MainMaterialModule } from '../main-material.module';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { UpdateDeleteEntityService } from '../entity-table/update-delete-entity.service';
import { InfoModalService } from '../info-modal/info-modal.service';
import { ActivatedRoute } from '@angular/router';
import { Location, LocationStrategy } from '@angular/common';

describe('StudentComponent', () => {
  let fixture: ComponentFixture<StudentComponent>;
  let component: StudentComponent;
  let mockRouter = {
    navigate: jasmine.createSpy('navigate')
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [StudentComponent],
      schemas: [NO_ERRORS_SCHEMA],
      imports: [MainMaterialModule, HttpClientTestingModule],
      providers: [
        StudentService,
        GroupsService,
        InfoModalService,
        UpdateDeleteEntityService,
        Location,
        LocationStrategy,
        { provide: ActivatedRoute, useValue: mockRouter}]
    }).compileComponents();
  }));

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

  it('should return array of students', () => {
    const studentService = fixture.debugElement.injector.get(StudentService);
    fixture.detectChanges();
    const students: Student[] = [
      {
        userId: 20,
        gradebookId: 'UX-3311221',
        studentSurname: 'Лящовський',
        studentName: 'Андрій',
        studentFname: 'Іванович',
        groupId: '2',
        plainPassword: '',
        photo: ''
      }, {
        userId: 13,
        gradebookId: 'UY-3019273',
        studentSurname: 'Заник',
        studentName: 'Іван',
        studentFname: 'Григорович',
        groupId: '5',
        plainPassword: '',
        photo: ''
      }, {
        userId: 155,
        gradebookId: 'UT-1029384',
        studentSurname: 'Лінкольн',
        studentName: 'Абрагім',
        studentFname: 'Зимонсович',
        groupId: '1',
        plainPassword: '',
        photo: ''
    }];
    const recordsCount: RecordsCount = {
      numberOfRecords: '3'
    };
    const spy = spyOn(studentService, 'getStudentsRange').and.returnValue(Observable.of([students, recordsCount]));

    component.getStudents();

    expect(component.students).toEqual(students);
  });

});

Answer 1

您可能已经找到了解决方案，但以防万一，也为了其他有同样问题的人的利益。我遇到了这个问题，发现以下解决方案有效：

我认为问题在于 LocationStrategy 是一个抽象类，您需要提供一个扩展 LocationStrategy 的具体类，例如 PathLocationStrategy。我将以下内容添加到我的提供者列表中

{ provide: LocationStrategy, useClass: PathLocationStrategy },

然后因为 PathLocationStrategy 依赖于 APP_BASE_REF 我还为此添加了一个提供程序

{ provide: APP_BASE_HREF, useValue: '/my/app'}

APP_BASE_HREF 和 PathLocationStrategy 是从 @angular/common 导入的，与 Location 和 LocationStrategy 一样