我一直在尝试在我的项目中使用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" );
}
}
任何人都可以指导我出错的地方..
先谢谢。
答案 0 :(得分:0)
我对代码进行了一些更改,现在正在运行。
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" }
},