[SOLVED] Ng2-translate Nested Keys

Ionic Framework ionic-v3
1

I am trying to add localisation to my Ionic2 application, and have installed ng2-translate.

My app.module has:

imports: [
IonicModule.forRoot(MyApp),
TranslateModule.forRoot({
  provide: TranslateLoader,
  useFactory: (createTranslateLoader),
  deps: [Http]
})

],
…
export function createTranslateLoader(http: Http) {
return new TranslateStaticLoader(http, ‘assets/i18n’, ‘.json’);
}

I have a en.json file in assets/i18n/en.json that contains:

{
“test”:“testing”,
“login”: {
“title”: “A title”
}
}

And my page template has:

{{ 'test' | translate }}

{{ 'login.title' | translate }}

The key for ‘test’ correctly displays the translation value, but the key for ‘login.title’ fails to translate and simply displays the value ‘login.title’

Am I missing something to get nested keys to work correctly ?

2

Seems I needed to set the default language with:

translate.setDefaultLang(‘en’);

Once that was set everything worked as expected.