Angular-translate: the value of {{'HOME_LINK' | translate}} is HOME_LINK

Question

I am trying to make an internationalization for my current project with angular-translate.js and angular-translate-loader-static-files.js, but now I faced a problem that the translation does not work, so the value of {{'HOME_LINK' | translate}} is always HOME_LINK. Below is the pertient file:

app.config.js

(function () {
    'use strict';

    angular.module('app')
        .constant("idleConfigParams", {"idle": 780, "timeout": 120, "keepalive": 240})
        .config(appConfig);

    /* @ngInject */
    function appConfig($urlRouterProvider, $locationProvider, $httpProvider, KeepaliveProvider, IdleProvider, idleConfigParams, brandProvider, $translateProvider) {

        //Set Brand Name
        brandProvider.setBrandName("ABC");
        brandProvider.setBrandInitial("ABC");

        // enable html5 mode
        $locationProvider.html5Mode(true).hashPrefix('!');

        $urlRouterProvider.otherwise("/fe/login");

        $httpProvider.interceptors.push('authInterceptorService');

        // Configure Idle settings
        IdleProvider.idle(idleConfigParams.idle);
        IdleProvider.timeout(idleConfigParams.timeout);
        KeepaliveProvider.interval(idleConfigParams.keepalive);

        $translateProvider.preferredLanguage("cn");
        $translateProvider.registerAvailableLanguageKeys(['en', 'cn'], {
            'en-*': 'en',
            'cn-*': 'cn'
        });

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

    }
})();

I am pretty sure is due to the translation files were not loaded, and I am not sure whether the value of prefix is right, giving the follow files structure, anyone who can help me out.

Files structure:

app
--account
--activity
--......
--languagesLib
  --cn.json
  --en.json
--layout
  --directives
  --navigation.html
  --footer.html
--app.config.js
--app.controller.js
--app.module.js
--app.run.js
--app.spec.js