CODEWITHSUNDEEP
javascriptangularjsangular-translate
user1438038
user1438038

Reputation: 6069

Configuration for angular-translate not picked up

I just took over an AngularJS application and tried to translate the user interface with angular-translate. However, the text is not translated and I also get a strange sanatization message in the console.

This is my application:

'use strict';

var app = angular.module('main', [
  'main.filters',
  'main.services',
  'main.directives',
  'main.controllers',
  'pascalprecht.translate',
  'ngCookies',
  'ngSanitize'
]);

app.config['$translateProvider', function($translateProvider) {
    $translateProvider
    .useStaticFilesLoader({
        prefix: '/translations/locale-',
        suffix: '.json'
    })
    .preferredLanguage('en')
    .useLocalStorage()
    .useSanitizeValueStrategy('escape')
    .useMissingTranslationHandlerLog();
}];

This is how I include the JS files:

<!-- Translation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-sanitize.min.js"></script>
<script src="../_resources/bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../_resources/bower_components/angular-translate-handler-log/angular-translate-handler-log.min.js"></script>
<script src="../_resources/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<script src="../_resources/bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.min.js"></script>
<script src="../_resources/bower_components/angular-translate-storage-local/angular-translate-storage-local.min.js"></script>

This is one of my translation files (in /translations/locale-en.json):

{
  "foo": "Foo",
  "bar": "Bar"
}

And this is how I tried to use the translations in HTML:

<strong translate="foo"></strong>

<strong>{{ 'bar'' | translate }}</strong>

The only message that I get in my browser's console is:

pascalprecht.translate.$translateSanitization: No sanitization strategy has been configured. This can have serious security implications. See http://angular-translate.github.io/docs/#/guide/19_security for details.

What am I doing wrong? Obviously, the configuration is not picked up at all?

Upvotes: 3

Views: 3429

Answers (1)

user1438038
user1438038

Reputation: 6069

All right, I missed a pair of round braces:

app.config(['$translateProvider', function($translateProvider) {
    $translateProvider
    .useStaticFilesLoader({
        prefix: '/translations/locale-',
        suffix: '.json'
    })
    .preferredLanguage('en')
    .useLocalStorage()
    .useSanitizeValueStrategy('escape')
    .useMissingTranslationHandlerLog();
}]);

Now my configuration is picked up as expected.

Upvotes: 4

Related Questions