RC.0 ng-translate

I have my file under ‘src/assests/i18n/’

My filenames are fr.json, en.json etc.

A file content look like:

“KEY1”: “Value”,
“KEY2”: {
“KEY3”: “Sub value are possible”

to get value in your templates

{{ “KEY1” | translate }} or {{ “KEY2.KEY3” | translate }}

Have you try to remove the first ‘/’ too?

‘assests/i18n’ instead of ‘/assests/i18n’

After a “ionic serve”, did you find a “www/assests/i18n” directory and files?

Yes and yes. I removed the first ‘/’ and I did find the folder in ‘www/assets’ so both of those are check. I cannot get the pipes to work though, even though I tried with both lower- and uppercase keys. All I am getting is the input key as the output when I call the pipe like this:
{{ ‘HOME.TITLE’ | translate }}
results in:

Do not forget to include the imports in app.module.ts :

import {TranslateModule } from 'ng2-translate/ng2-translate';
import { TranslateLoader, TranslateStaticLoader } from 'ng2-translate/src/translate.service';

Nor the initialization for a default language (in app.component.ts):

  // Set language
  var userLang = navigator.language.split('-')[0];
  userLang = /(ca|en|es)/gi.test(userLang) ? userLang : 'en';


Also, keys are probably case sensitive, so you them exactly as they are in your files.

Could you run the app in browser and check if the language file is really loaded?


I had added the TranslateService to the providers array in the app.module.ts, which I now removed, I changed my imports to what yours where (I imported all of that through ng-translate/ng-translate before). I set the language and success! I finally got confirmation that it is actually looking for a language! Now it is just saying that it can’t find the file, but I should be able to fix that with some tweaking of the path.

Thank you very much for the help so far!

OK so what I had to do was keep the first ‘/’ in my path string, making it like the following ‘/assets/i18n’. Must’ve been some imports and config that was incorrect. It is now working as expected. Kudos to you @jrierab, thank you very much for all the help!

May I ask you @alex_key , does that work when you run your app on a real device?

I’m sorry to have pointed you to remove that first ‘/’, but in my case, after x hours of debugging, that was my solution…weird

I have not tried to run it on a real device yet, no. Have you run into issues there?
No worries about the path, I am extremely grateful for your help!


Exactly, the issue you had, “KEY instead of translation displayed”, I had it on real device (or ionic run) but not while debugging (ionic serve)…but yep maybe that is just something related to my project at the end

I tried to run it in the emulator, and I am not getting the same error as before, instead nothing shows up, not even the key. I think it could be about missing permissions on the device perhaps? Or a missing step in the build process where the file doesn’t get loaded?

Well I can’t tell, in my case to solve that issue I really had to remove the first ‘/’…

Maybe in your case it’s something else. Like do you still have got somewhere some compilations error (even when there is a compilation error the build process continue and run the app). Have a look at your build logs.

Alright, update on the issue. So IN THE DEBUGGER (using ionic serve) I need to use a forward slash at the start of the translation path. HOWEVER, when running on the emulator, I must remove the forward slash, and it works. Probably has to do with how different devices handle path maybe? If someone could double check this on an android device, that would be great.

NOTE: I am running the ionic serve debugging instance on chrome, have yet to try safari (CORS issues, too lazy to fix)

Yeah, didn’t see any errors there (at least not in the console), but it is evident that is has to do with what or where you are targeting.

Strange…maybe try ‘./assests/i18n’ (I read that somewhere a guy is using that) … who knows

Hmm, I will try that yes.

Yep that seemed to do the trick, using ‘./assets/i18n’ made it work on both emulator (using xcode to build it, not ionic emulate, but ionic build iOS and then using xcode and targeting emulator) and the browser using ionic serve!

Coolio! Same for me actually. ‘./assets/i18n’ works with “ionic serve” and “ionic build android” tested on my real phone device. Gonna witch to that too. Thx :slight_smile:

Awesome! Great to see that it is working! Thanks for the help!

1 Like

This worked great for me, thanks!

1 Like

check this as well if U can’t solve it: