單元測試依然失敗ng2-translate

Question

正常運行應用程序時，一切正常。但是，當我嘗試編寫這些單元測試時遇到了一些問題。我從下面的代碼中刪除了任何項目特定的代碼/類。

我得到的錯誤是

Chrome 51.0.2704 (Mac OS X 10.11.6) App: Angular encountered a declaration exception FAILED TypeError: Cannot read property 'setDefaultLang' of undefined at 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 
    } 
} 

我所做的是從@ angular/core導入OnInit，在構造函數中將公共轉換爲public並調用setDefaultLang並在ngOnInit函數中使用。