RC.0 ng-translate

I’ve spent several hours trying to wrap my head around how the new app structure and imports work with external angular modules. I’m trying to implement ng-translate into my ionic 2 rc.0 app but with no luck.
I’m either getting errors about double importing, or doesn’t find any of my translations (however it seems to work, somehow).
Any explanations or hep would be very much appreciated.

Right now I have tried to do the very basic, following the angular tutorial of it on github:
First I import this into my app.module.ts
import { TranslateModule, TranslateLoader, TranslateStaticLoader, TranslateService } from ‘ng2-translate/ng2-translate’;
Then I add this to my imports section:
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, ‘/assets/i18n’, ‘.json’),
deps: [Http]
})
And it seems to be live. Because I can inject it into my application and it respons. However it does not find any of my translations, as the pipes don’t return anything, and calling the .get() function on any key I got doesn’t return anything either. So I am doing something wrong here, either with initialization, or where I am pulling my assets from. I got the translations stored in the folder: src/assets/i18n and currently only got en.json in there.

As previously stated, any help is very much appreciated!

1 Like

Hey,

1.Ensure you have ng2-translate 3.0.0 installed

2.The provider useFactory should use a function (see below)

3.If you still don’t find translations on a device, try to remove the first slash before ‘/assests/i18n’ (maybe just me but that helped me)

Function:

export function translateLoaderFactory(http: Http) {
    return new TranslateStaticLoader(http, './assests/i18n', '.json');
}

@NgModule({

 ...
      imports: [
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: translateLoaderFactory,
             deps: [Http]
        })
    ]
4 Likes

Where do you store your translations, and what format are they?
I am still getting the same problem as before.
I have copied your function and checked my version which is 3.1.0, could that be a problem?

Also do keys have to be uppercase?

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:
HOME.TITLE

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';

  translate.setDefaultLang('en');
  translate.use(userLang);      

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?

2 Likes

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!

Thx.

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: