Use angular-translate to load .json files


#1

Hi,

I’m using angular-translate to translate my ionic app in 3 different languages. Iv’e created a “languages” folder inside the “www” directory where I’ve put all my .json files. Then I use angular-translate-loader-static-files to serve them which works fine when testing the ionic app in a browser. But when I run the app on a emulater the languages files doesn’t get loaded.

The reason I put them in separate .json files was because I didn’t want to create all the translations for all the languages inside the .config function.

Instead I only run this bit of code inside the .config function:

$translateProvider.useStaticFilesLoader({
      prefix: '/languages/',
      suffix: '.json'
    })

Any ideas on how to resolve this?


#2

could you provide any code?


#3

I just edited my first post while you were replying.

The code I use in the .config function to load the correct language file is this:

$translateProvider.useStaticFilesLoader({
      prefix: '/languages/',
      suffix: '.json'
    })

#4

either you need to remove 1 backslash to the prefix like

prefix: ‘languages/’,

or try to uniform the language tags
https://angular-translate.github.io/docs/en/#/guide/07_multi-language

something like (this is how I do it)

.config(function($translateProvider) {

$translateProvider.useStaticFilesLoader({
    prefix: 'language/',
    suffix: '.json'
});

$translateProvider.registerAvailableLanguageKeys(['en', 'de', 'fr', 'it'], {
    'en-US': 'en',
    'en-UK': 'en',
    'de-DE': 'de',
    'de-CH': 'de',
    'fr-FR': 'fr',
    'it-IT': 'it',
});

$translateProvider.uniformLanguageTag('bcp47');
$translateProvider.fallbackLanguage('en');

});

#5

My code looks pretty much identical to yours except the extra “/” in the path. Works perfect when I removed the initial slash. Thank you!