It says that: “By default this will look for your translation json files in i18n/”; but where should be located that folder? should it be under [project]\src\ or anywhere else?
@arsene123 I don’t think you need to load the pipe in RC0/RC1 explicitly, you just load the module (TranslateModule) with @NgModule (the pipe is loaded with the module).
@arsene123 To use it in your code (not in the pipe) you must use the TranslateService. I created a TranslationService to wrap the ng2-translate TranslateService:
import { Injectable } from '@angular/core';
import { LangChangeEvent, TranslateService } from 'ng2-translate/ng2-translate';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class TranslationService {
constructor(
private translateService: TranslateService
) { }
setDefaultLang(lang: string) {
return this.translateService.setDefaultLang(lang);
}
use(lang: string): Observable<any> {
return this.translateService.use(lang);
}
getCurrentLang(): string {
return this.translateService.currentLang;
}
onLangChange(): Promise<LangChangeEvent> {
return new Promise((resolve, reject) => {
this.translateService.onLangChange.first().subscribe(
event => resolve(event),
error => reject(error)
);
});
}
instant(key: string | Array<string>, interpolateParams?: Object): string | any {
let result = key && this.translateService.instant(key, interpolateParams);
result = (result !== key) ? result : '';
if (key && !result) {
console.error(`[not translated key]::${key}`);
}
return result;
}
}
I retrieve the translation with the instant method (I could use the get method, but it returns an observable I normally prefer retrieving the data immediately).
To make sure that the traslations were already loaded in the AppComponent I set the root page only after the onLangChange return: