Search code examples
javascriptjqueryangularjsgulpangular-translate

Angular-Translate only displays resource key

I'm new with angular and I'm facing a big problem with the angular translate system.

I'm tired of searching and I think I have all code correct to do the translate of my resources but when I build the project it only displays the resource key. For example, if I have this resource file 

{
  "LOGIN_USERNAME": "Nome de utilizador",
  "LOGIN_PASSWORD":"Password"
}

on the browser it's displayed LOGIN_USERNAME.

I'm not getting none JS error but I noticed already somewhere on the jquery.js there is this function:

function assert( fn ) {
    var div = document.createElement("div");

    try {
        return !!fn( div );
    } catch (e) {
        return false;
    } finally {
        //some code
    }
        //some code
}

I putted here a breakpoint and the it always falls on this catch. This isn't making the translate because of this? Where is the problem and how can I solve this?

app.js

(function ()
{
    angular.module("MainWebsite",
    [
        'ui.router',
        'pascalprecht.translate',
        'angularModalService',

        //some other modules of my

        "LoginModule"
    ])

    .config(['$stateProvider', '$compileProvider', '$urlRouterProvider', '$sceDelegateProvider', '$httpProvider', "$translateProvider",
    function ($stateProvider, $compileProvider, $urlRouterProvider, $sceDelegateProvider, $httpProvider, $translateProvider)
    {
        $compileProvider.debugInfoEnabled(false);

        $translateProvider.useStaticFilesLoader(
        {
            prefix: 'resources/locale-',
            suffix: '.json'
        });
        $translateProvider.useSanitizeValueStrategy('escape');
        $translateProvider.preferredLanguage('pt-PT');
        $translateProvider.forceAsyncReload(true);

        $urlRouterProvider.otherwise('/login');

        $stateProvider
        .state('login',
        {
            url: '/login',
            template: '<login></login>',
        })
    }])

    .run(["$rootScope", "$state", "$document", "LayoutService",
     function ($rootScope, $state, $document, LayoutService)
     {
            $rootScope.LayoutState = LayoutService.LayoutState;
     }])
})();

login.html

<label>{{::'LOGIN_USERNAME'|translate}}</label>
<label>{{'LOGIN_PASSWORD'|translate}}</label>

login.js (module)

(function()
{
      angular.module("LoginModule", [])

      .directive("login", [function () 
      {
            return {
                  restrict: "EA",
                  replace: false,
                  templateUrl: "modules/login/login.html",
                  controller: "LoginController",
                  controllerAs: "LoginVM"
            }
      }])
})();

loginCtrl.js (controller)

(function()
{
      angular.module("LoginModule")

      .controller("LoginController", ["$state", function ($state) 
      {
      }])
})();

index.html

<!doctype html>
<html class="no-js" lang="pt-pt" ng-app="MainWebsite">
<head>
    <meta charset="utf-8">
    <meta h"x-ua-compatible" content="ie=edge">
    <meta name="viewport" cttp-equiv=ontent="width=device-width, initial-scale=1.0">
    <title>Candidaturas Online</title>

    <link rel="stylesheet" href="css/app.min.css">
</head>
<body>
    <script src="js/app.min.js"></script>

    <div ui-view class="appContainer"></div>
</body>
</html>

package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "any description",
  "main": "gulpfile.js",
  "author": "someone",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-load-plugins": "^1.1.0",
    "gulp-sass": "^2.3.1",
    "gulp-connect": "^4.0.0",
    "gulp-ignore": "^2.0.1",
    "gulp-rimraf": "^0.2.0",
    "gulp-concat": "^2.6.0",
    "gulp-order": "^1.1.1",
    "gulp-uglify": "^1.5.3",
    "gulp-sourcemap": "^1.0.1",
    "gulp-imagemin": "^3.0.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-mobilizer": "^0.0.3",
    "gulp-replace": "^0.5.4",
    "gulp-angular-filesort": "^1.1.1",
    "gulp-rename": "^1.2.2",
    "gulp-angular-templatecache": "^1.8.0",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "gulp-gzip": "^1.3.0",
    "run-sequence": "^1.1.5",
    "imagemin-pngcrush": "^4.1.0",
    "streamqueue": "^1.1.1",
    "weinre": "^2.0.0-pre-I0Z7U9OV"
  },

  "dependencies": {
    "angular": "^1.5.7",
    "angular-animate": "^1.5.7",
    "angular-touch": "^1.5.7",
    "angular-sanitize": "^1.5.7",
    "angular-ui-router": "^0.2.18",
    "angular-translate": "^2.11.1",
    "angular-translate-loader-static-files": "^2.11.1",
    "angular-modal-service": "^0.6.10",
    "angular-ui-bootstrap": "^1.3.2",
    "bootstrap-sass": "^3.3.6",
    "motion-ui": "^1.2.2",
    "hamburgers": "^0.5.0",
    "jquery": "^2.2.3"
  },
  "scripts": 
  {
    "start": "gulp",
    "build": "gulp sass"
  }
}
Solution

  • Solved!

    To test if was a plugin problem I used this code on my loginCtrl.js and I got an alert with the right translation:

    $translate('LOGIN_USERNAME').then(function (translated)
{
    alert(translated);
});

    So, I copied and pasted exactly what there are on the guidelines for the html and changed the resource key. So, instead of 

    {{::'LOGIN_USERNAME'|translate}}

    I used 

    {{'LOGIN_USERNAME' | translate}}

    and now it works! Apparently :: doesn't work here, but according my colleagues this serves to assign the value only the first time and so the next time AngularJS ignores this binding, assuming the latter made.