CODEWITHSUNDEEP
angularjshottowelangular-translate
RasikaSam
RasikaSam

Reputation: 5573

angularjs-translate-loader-static-files with HotTowel template

I am trying to use angular-translate with static file-loader. My application is based on HotTowel template and below is my modified config file. I have added references to angular-translate-loader-static-files.js and angular-translate.js correctly and have injected 'pascalprecht.translate' to the app. It even loads the json file in /Languages/si-LK.json file. I can see it in Dev tools in the browser network tab. However translation is not working. And i am not seeing any error in the Console. It just displays the key only. I have the key in the Json file. 

app.config(['$translateProvider', function ($translateProvider) {
        $translateProvider.preferredLanguage('si-LK');
        $translateProvider.useStaticFilesLoader({
            prefix: '/Languages/',
            suffix: '.json'
        });

    }]);

In my HTML i have this

<span>{{'INTROTEXT' | translate}}</span>

However if I switch to below, it all works. Any suggestion much appreciated.

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.preferredLanguage('si-LK');
$translateProvider.translations('en-US', {
    INTROTEXT: 'intro in English'
 }).translations('de', {
    INTROTEXT: 'intro in German'
    }).translations('si-LK', {
    INTROTEXT: 'Intro in sinhala'
    });
}]);

Upvotes: 2

Views: 643

Answers (1)

ThiagoPXP
ThiagoPXP

Reputation: 5462

In my project, I used partial loaders instead of staticFilesLoader. However what I think you are missing to call run() after config()

/*app.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.preferredLanguage('si-LK');
    $translateProvider.useStaticFilesLoader({
        prefix: '/Languages/',
        suffix: '.json'
    });

}])*/
.config(['$translateProvider', function ($translateProvider) {
    $translateProvider
        .useLocalStorage()
        .determinePreferredLanguage(function () { return 'pt'; })
        .useLoader("$translatePartialLoader", { urlTemplate: "/i18n/{part}.{lang}.json" });

}])
.run(function ($rootScope, $translate) {
    $rootScope.$on('$translatePartialLoaderStructureChanged', function () {
        $translate.refresh();
    });
});

I hope that helps..

Upvotes: 1

Related Questions