Komponententests bleiben mit ng2-translate fehlerfrei

Question

Alles ist in Ordnung, wenn App normal ausgeführt wird. Bei dem Versuch, diese Komponententests zu schreiben, stößt ich jedoch auf Probleme. Ich entfernte alle projektspezifischen Codes/Klassen aus dem unten stehenden Code.

Der Fehler ich erhalte ist

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)

Jede Hilfe wird sehr geschätzt.

Ich habe es Bootstrap in main.ts

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

hier mein angular.component.ts ist

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

hier ist mein 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

Ich habe eine Lösung für dieses Problem

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

Was ich getan habe, war OnInit von @ angular/core importieren, machte übersetzen im Konstruktor public und rufen Sie die setDefaultLang und verwenden Sie in der ngOnInit -Funktion.