Ngx-translate: outputs key instead of translated string

I’m using ionic 3 with lazy load and I tried to apply the updated guide information but when I try to translate, the view return the Key name. ex :
<ion-title>{{ 'HOME.TITLE' | translate }}</ion-title>

returns in view HOME.TITLE instead of “This is the title”.

Here is my app.module.ts

//..
//
import { HttpModule, Http } from '@angular/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
} 

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

Here is my home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { Home } from './home';

@NgModule({
  declarations: [
    Home,
  ],
  imports: [
    IonicPageModule.forChild(Home),
    TranslateModule.forChild()
  ],
  exports: [
    Home
  ]
})
export class HomeModule {}

Here is my home.ts

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

import { NavController, MenuController, ModalController, IonicPage } from 'ionic-angular';

import {TranslateService} from '@ngx-translate/core';

@IonicPage()
export class Home {
constructor(public navCtrl: NavController, public menuCtrl: MenuController, public modalController: ModalController, translate: TranslateService) {
    // this language will be used as a fallback when a translation isn't found in the current language
       translate.setDefaultLang('en');

        // the lang to use, if the lang isn't available, it will use the current loader to get them
       translate.use('en');
  }
}

They changed the language.json files structure.

{
    "HOME": {
        "HELLO": "hello"
    }
}

Maybe this is your problem

Hi,
Thanks for your answer but it’s not this…
Here is my en.json

{


    "HOME": {
        "TITLE": "This is the title"
    }
}

3 days I’m totally stuck with this @ngx-translate problem.
I really don’t understand what I’m doing wrong.

Maybe it’s beacuse you’re trying to pass in a string by adding those quotes around HOME.TITLE and since you use bindings, it get’s evaluated as a string. Ditch the quotes surrounding home.title and I think it should work (unless this is some kind of feature of ngx-translate which I’m not aware off).

You mean :

<ion-title>{{ HOME.TITLE | translate }}</ion-title>

I get this error:

Uncaught (in promise): TypeError: undefined is not an object (evaluating 'co.HOME.TITLE')

That’s my point haha :wink:

Finally I found the solution:

In app.component.ts we must do this:

..
 import { TranslateService } from '@ngx-translate/core';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:string = "Home";

  constructor(translate: TranslateService) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      // this language will be used as a fallback when a translation isn't found in the current language
         translate.setDefaultLang('en');

          // the lang to use, if the lang isn't available, it will use the current loader to get them
         translate.use('en');
    });
  }
}
2 Likes

Is there maybe anything else you did? I have exactly the same problem. I used this before in another app and it worked perfect. Now I’m getting the Keys EVENT.TITLE instead of the value. I have no idea what I’m doing wrong. Even copied code from the working app.

did you install the plugin to the new project?

I eventually got the values for the default lang to display. Now whenever I try and switch the lang nothing happens. I make use of translate.use('newkeyhere') but it simply does nothing.

I love the new Lazy loading in Ionic, but man it’s been causing me so many headaches.

Just as a side note. I can get it working perfectly with the old way that Ionic worked (without lazy loading).

If anyone wants to take a look at the code: https://github.com/sumodevelopment/ngx-translate-test

1 Like

Please show your Pipe in template view, something isn’t declared well somewhere in your code. Ngx works perfect dude. A side note: if it output keys, you’re trying to output objects instead of strings. A typo in your code somewhere.
In case you haven’t read the docs, ngx (like ng2-translate) will only output strings.
A side side, note, a pipe is useful for that.

1 Like

Hello, Here is a link to the code if you’re interested: https://github.com/sumodevelopment/ngx-translate-test

I use the pipes {{‘KEY_NAME’ | translate }} I’ve managed to get the default lang working. My issue now remains the switching of the lang. The translate.use() simply does nothing :frowning:

Update: 2017-06-05 10:25am
I’ve added the onLangChange event and the translations object returns empty. So it would appear that it is not retrieving any translations.

2 Likes

Getting Same issue with ionic 3 lazzy loading sidemenu app.

Did you got any solution ?

No nothing yet. I’ve made a post on stackoverflow as well.

I couldn’t make it work in my app. I found one problem though and try to fix it now. Maybe this can help.
The problem is that it’s using this TranslateHttpLoader, which always try to request a server for the translated text. But in my app, I have the json file packaged together with the js files. So what it really should do is to load the js file from the file system instead of from a server.
I’m trying to use @ngx-universal/translate-loader now.
It needs to be a server mode for app though. Following the example, I’ll get the browser mode which uses http requests.

can you post the fix ?

Scratch what I said. I was debugging that and found that universal loader uses readfilesync from nodejs. It doesn’t exist in the app.

It turns out my issue is different from yours.
I was using an absolute path ‘/asset/i18n’ to TranslateHttpLoader. When I changed that to relative one ‘asset/i18n’ or ‘./asset/i18n’, it works.

Sorry to interrupt your discussions.

2 Likes

I dont have a fix. Had to use an older version of Ionic.