Модульные тесты продолжают терпеть неудачу с ng2-translate

Question

Все нормально при запуске приложения нормально. Однако при написании этих модульных тестов у меня возникают проблемы. Я удалил любой код / ​​классы, специфичные для проекта, из кода ниже.

Я получаю ошибку

Chrome 51.0.2704 (Mac OS X 10.11.6) Приложение: Angular обнаружил исключение объявления FAILED TypeError: Невозможно прочитать свойство 'setDefaultLang' из неопределенного в 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!');
  });
});

Answer 1

У меня есть решение этой проблемы

import { Component, ViewContainerRef, OnInit } 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 implements OnInit{
  viewContainerRef: ViewContainerRef;
  title = 'angular works!';

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

  ngOnInit(): void{   
    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
  }
}

Что я сделал, так это импортировал OnInit из @angular/core, сделал translate public в конструкторе, вызвал setDefaultLang и использовал его в функции ngOnInit.