ng2-translate无效

Question

我一直在尝试在我的项目中使用ng2-translate来获得多语言支持，但它给出了一些错误，如下面的

这是我的app.module.ts

import { NgModule } from '@angular/core';<br>
import { RouterModule } from '@angular/router';<br>
import { FormsModule, FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';<br>
import { HttpModule } from '@angular/http';<br>
import { BrowserModule } from '@angular/platform-browser';<br>
import { TranslateModule } from 'ng2-translate';<br>

@NgModule({
imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule.forRoot(),
    RouterModule.forRoot([
        { path: '', component: HomeComponent },
        { path: 'employee', component: EmployeeComponent },
        { path: 'Home/Employees', component: EmployeeComponent },



    ])
],

providers: [],
declarations: [AppComponent, EmployeeComponent, HomeComponent, NavigationBarComponent, NavigationBarItemsComponent, GridComponent, TenantComponent],
bootstrap: [AppComponent],})export class AppModule { }

Systemjs.config.js

 var map = {
    'app': '/app',
    '@angular': '/node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'ng2-translate': 'node_modules/ng2-translate',
    'rxjs': '/node_modules/rxjs'
},
    packages = {
        'app': { main: './main.js', defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'ng2-translate': { main: './index.js', defaultExtension: 'js' }
    },
    ngPackageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'forms'
    ];

app.component.js

import { Component } from '@angular/core';

import { TranslateService } from 'ng2-translate';


@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    constructor(private translate: TranslateService)
    {
        translate.addLangs(["en", "fr", "cn", "ru", "es"]); 
        translate.setDefaultLang("en");
        let browserLang = translate.getBrowserCultureLang();
        translate.use(browserLang.match(/en|fr|cn|ru|es/) ? browserLang:"en" );
    }
}

任何人都可以指导我出错的地方..

先谢谢。

Answer 1

  

我对代码进行了一些更改，现在正在运行。

Here is my updated app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule, FormBuilder, FormControl, FormGroup, 
ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { GridComponent } from './grid.component';
import { TenantComponent } from './Tenant/tenant.component';
import { NavigationBarComponent } from './Home/navigationBar.component';
import { NavigationBarItemsComponent } from 
'./Home/navigationBarItems.component';
import { TenantSwitchingComponent } from './Home/tenantswitching.component';

import { EmployeeComponent } from './Employee/employee.component';
 import { HomeComponent } from './Home/home.component';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { TranslateModule, TranslateLoader, 
 TranslateService,TranslateStaticLoader } from 'ng2-translate';


 @NgModule({
imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,

    RouterModule.forRoot([
        { path: '', component: HomeComponent },
        { path: 'employee', component: EmployeeComponent },
        { path: 'Home/Employees', component: EmployeeComponent }


    ]),
    TranslateModule.forRoot({
        provide: TranslateLoader,
        useFactory: (http: Http) => new TranslateStaticLoader(http, 'app/i18n', '.json'),
        deps: [Http]
    })
],

providers: [],
declarations: [AppComponent, EmployeeComponent, HomeComponent, NavigationBarComponent, NavigationBarItemsComponent, GridComponent, TenantComponent, TenantSwitchingComponent, LogoComponent],
bootstrap: [AppComponent, TenantSwitchingComponent, LogoComponent, NavigationBarComponent],

   })
   export class AppModule {

   }

这是我的Systemjs.config.js

 var map = {
    'app': '/app',
    '@angular': '/node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'ng2-translate': 'node_modules/ng2-translate/bundles',
    'rxjs': '/node_modules/rxjs'
},

    packages = {
        'app': { main: './main.js', defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },

        "ng2-translate": { main: 'index.js', "defaultExtension": "js" }
    },