angular - 単体テストが ng2-translate で失敗し続ける

Question

アプリを正常に実行しているときはすべて問題ありません。ただし、これらの単体テストを作成しようとすると、問題が発生します。以下のコードからプロジェクト固有のコード/クラスを削除しました。

私が得ているエラーは

Chrome 51.0.2704 (Mac OS X 10.11.6) アプリ: Angular で宣言例外が発生しました FAILED TypeError: AngularAppComponent.translationConfig (/Users/angular/dist/app/angular.component.js: 40:23)

どんな助けでも大歓迎です。

main.ts でブートストラップしました

bootstrap(ImeetSiteAngularAppComponent, [
  disableDeprecatedForms(),
  provideForms(),
  HTTP_PROVIDERS,
  { 
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, 'app/shared/i18n', '.json'),
    deps: [Http]
  },
  TranslateService
  ])

ここに私の angular.component.ts があります

import { Component, ViewContainerRef } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { RouteConfig, ROUTER_DIRECTIVES, Router, ROUTER_PROVIDERS} from '@angular/router-deprecated';

import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';

import { HttpService } from './services/api/http.service';
import { TranslateService } from 'ng2-translate/ng2-translate';

import { Utils } from './shared/utilities/utils';

import { LoggedInRouterOutlet } from './shared/LoggedInRouterOutlet';
@Component({
  moduleId: module.id,
  selector: 'angular-app',
  templateUrl: 'angular.component.html',
  styleUrls: ['styles/main.css'],
  viewProviders: [BS_VIEW_PROVIDERS],
  providers: [
              HttpService, 
              HTTP_PROVIDERS, 
              ROUTER_PROVIDERS, 
              MODAL_DIRECTVES, 
              Utils, 
              TranslateService],
})

export class AngularAppComponent {
  viewContainerRef: ViewContainerRef;
  title = 'angular works!';
  translate: TranslateService;

  constructor(viewContainerRef:ViewContainerRef, translate:TranslateService) {
    console.log('App.component');
    this.viewContainerRef = viewContainerRef;
    this.translate = translate;
    this.translationConfig();
  }

  translationConfig() {   
    var userLang = navigator.language.split('-')[0]; // use navigator lang if available
    userLang = /(de|fr|en)/gi.test(userLang) ? userLang : 'en';
    this.translate.setDefaultLang('en'); //set default lang
    this.translate.use(userLang); //use lang if found
  }
}

ここに私の angular.component.spec.ts があります

import {
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
  async
} from '@angular/core/testing';
import { ViewContainerRef, provide } from '@angular/core';
import { AngularAppComponent } from '../app/angular.component';
import { HTTP_PROVIDERS, XHRBackend,ConnectionBackend, Http, BaseRequestOptions } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { TranslateService, TranslateLoader, TranslateStaticLoader } from 'ng2-translate/ng2-translate';

beforeEachProviders(() => [
        AngularAppComponent, 
        ViewContainerRef, 
        HTTP_PROVIDERS,
        { 
          provide: TranslateLoader,
          useFactory: (http: Http) => new TranslateStaticLoader(http, 'app/shared/i18n', '.json'),
          deps: [Http]
        },
        TranslateService,
        provide(XHRBackend, { useClass: MockBackend })
        ]);

describe('App: ImeetSiteAngular', () => {
  let viewContainerRef: ViewContainerRef;
  let translate: TranslateService;
  let app = new AngularAppComponent(viewContainerRef, translate);

  it('should create the app', () => {
    console.log('app is truthy')
    expect(app).toBeTruthy();
  });

  it('should have as title \'angular works!\'',() => {
    console.log('app has a title')
    expect(app.title).toEqual('angular works!');
  });
});