[SOLVED] Why angular-translate not working?

Hi,

I installed angular-translate and angular-local-storage in my project which save in the path [project]/www/lib/.

And then I ran $ ionic serve and these two lib works well in the web browser.

However, when i run $ ionic add platform ios and $ ionic run ios and check in the iOS Sim, these two lib seems not working, this made me confused for a long time!

Is there any suggestions?
Thanks!

Can you add a link to the code?
I’m using Angular-translate without issue, so it’s not a Ionic issue.

@Evanion, Thanks for your reply!

i think i had found the answear, i put may language code as an object formatted in a .json file and use angular-translate-loader-static-files to load it, and i tested in the web brower it worked well.

However, when running as an app on the ios sim, it seems .json GET Request not work!

Did you find a solution to the problem? I have the similar problem on both ios and Android.

1 Like

Hi @santinowu and @kirov,

Here is a tutorial I wrote a few months back on the topic of internationalization in Ionic using Angular Translate:

It should solve your problems, but let me know if you still need further help.

Regards,

hi @nicraboy, @santinowu and @Kirov, i have the same problem!
Nicraboy as you explain in your post work becouse you insert the translations directly in code like this:

$translateProvider.translations(‘es’, {
hello_message: “Hola”,
goodbye_message: “Adios”
});

The problem arise here:

$translateProvider.useLoader(’$translatePartialLoader’, {
urlTemplate: ‘/i18n/{part}/{lang}.json’
})

I use this way because i have long translations and i load that in the right UI/view.

I think the problem is in GET request, it seems in ios-sim there is no server listening in localhost for retriving localization files.

Instead if i do ionic emulate ios -l WITH live review active, it works!

I’ve opened this tread Ionic emulate ios without livereload does not work
But still no answer.

Regards,
Tommaso

I found the solution for me!!! and also the solution form my $http request for localhost that does’t work: the problem was the / in fornt the URI

Work

$translateProvider.useLoader(’$translatePartialLoader’, {
urlTemplate: ‘i18n/{part}/{lang}.json’
})

Doesn’t work

$translateProvider.useLoader(’$translatePartialLoader’, {
urlTemplate: ‘/i18n/{part}/{lang}.json’
})

Hope it help!

2 Likes

hi @nicraboy @Kirov and @kurtommy thank you for your reply!

The problem is still occured, if i use angular-translate-loader-static-files lib for my project:

# index.html
<script src="lib/angular-translate/angular-translate.js"></script>
<script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>

# app.js
angular.module([some module]).config(function ($translateProvider) {
    $translateProvider.useStaticFilesLoader({
        prefix: '/js/languages/',
        suffix: '.json'
    });
    $translateProvider.preferredLanguage('zh_CN');
});

and the languages folder has two files: en_US.json and zh_CN.json.

The above code is still working when runing in the browse but not in the android platform or ios sim!

Now, i configs my language data using angular.constant() method like this:

angular.module('configs', []).constant('languageConfig', {
    'LANGUAGE_ZH_CN': {
        "LEFT_MENU": "菜单栏",
        "LOGIN_TITLE": "登录",
        "PRODUCT_LIST": "商品列表",
        "PRODUCT_DETAIL": "商品详情"
    },
    'LANGUAGE_EN_US': {
        "LEFT_MENU": "Menu",
        "LOGIN_TITLE": "Login",
        "PRODUCT_LIST": "Product List",
        "PRODUCT_DETAIL": "Product Detail"
    }
});

And inject this config into service or controller or config when i need and this works.

However, is these any suggestion for me to make my app works better?

Thanks!

As i said the problem was in the first '/'
Then try to change this:

prefix: ‘/js/languages/’,

in this:

prefix: ‘js/languages/’,

:slight_smile:

1 Like

Thank you! @kurtommy

I have modified my code as what you said, it works!

Again, Thank you! :sunny:

1 Like

see this solution…i think it’s good