angular-translate not working but not errors - angularjs

Question

I've just installed angular-translate, but the webpage after this doesn't work.
Here you can find my code:
app.js
angular
.module('frontEndApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngStorage',
'ngResource',
'angular-translate'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
Index.html.
<script src="bower_components/angular-translate/angular-translate.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/controllers/prueba/pruebaController.js"></script>
<script src="scripts/controllers/loginController.js"></script>
<script src="scripts/controllers/department/departmentController.js"></script>
<script src="config/appConstants.js"></script>
<script src="config/languajes.js"></script>
languajes.js
'user strict';
var app = angular.module('frontEndApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
code: 'Code',
department: 'Deparment',
description: 'Description',
boss: 'Boss',
project: 'Project'
});
$translateProvider.translations('es', {
code: 'Código',
department: 'Deparmento',
description: 'Descripción',
boss: 'Jefe',
project: 'Proyecto'
});
$translateProvider.preferredLanguage('en');
// $translateProvider.useSanitizeValueStrategy('escapeParamenters');
}]);
app.config(['$locationProvider', function ($locationProvider) {
$locationProvider.html5Mode(true);
}]);
app.controller('Ctrl', function ($scope, $translate) {
$scope.changeLanguage = function (key) {
$translate.use(key);
};
});
bower.json
{
"name": "front-end",
"version": "0.0.0",
"dependencies": {
"angular": "^1.6.6",
"bootstrap-sass-official": "^3.2.0",
"angular-animate": "^1.6.6",
"angular-aria": "^1.6.6",
"angular-cookies": "^1.6.6",
"angular-messages": "^1.6.6",
"angular-resource": "^1.6.6",
"angular-route": "^1.6.6",
"angular-sanitize": "^1.6.6",
"angular-touch": "^1.6.6",
"bootstrap-sass": "bootstrap-sass-official#^3.3.7",
"ngstorage": "^0.3.11",
"angular-translate": "^2.16.0"
},
"devDependencies": {
"angular-mocks": "^1.6.6",
"angularLocalStorage": "ngStorage#^0.3.2"
},
"appPath": "app",
"moduleName": "frontEndApp",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
}
The problem is the system works fine, but when I insert the script
all is gone, the webpage is blank only the header appears.
I have tried several solutions but I have no idea.
https://docs.angularjs.org/error/$injector/nomod?p0=pascalprecht.translate
https://angular-translate.github.io/docs/#/guide

Answer 1

In languajes.js:
angular.module('frontEndApp', ['pascalprecht.translate'])
is telling angular to create a module called frontEndApp - which overrides the module you've created in app.js.
(Overrides because app.js is run before languajes.js due to the order of the scripts in the HTML).
What you need to do:
app.js
angular
.module('frontEndApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngStorage',
'ngResource',
'pascalprecht.translate'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
languajes.js
'user strict';
var app = angular.module('frontEndApp');
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
code: 'Code',
department: 'Deparment',
description: 'Description',
boss: 'Boss',
project: 'Project'
});
$translateProvider.translations('es', {
code: 'Código',
department: 'Deparmento',
description: 'Descripción',
boss: 'Jefe',
project: 'Proyecto'
});
$translateProvider.preferredLanguage('en');
// $translateProvider.useSanitizeValueStrategy('escapeParamenters');
}]);
app.config(['$locationProvider', function ($locationProvider) {
$locationProvider.html5Mode(true);
}]);
app.controller('Ctrl', function ($scope, $translate) {
$scope.changeLanguage = function (key) {
$translate.use(key);
};
});

Answer 2

This is the solution.
use strict;
/**
* #ngdoc overview
* #name frontEndApp
* #description
* # frontEndApp
*
* Main module of the application.
*/
angular
.module('frontEndApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngStorage',
'ngResource',
'pascalprecht.translate'
]).config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.when('/prueba', {
templateUrl: 'views/prueba/prueba.html',
controller: 'pruebaController',
controllerAs: 'prueba'
})
.when('/login', {
templateUrl: 'views/login/login.html',
controller: 'loginController',
controllerAs: 'login'
})
.when('/department', {
templateUrl: 'views/department/department.html',
controller: 'departmentController',
controllerAs: 'departmentController',
data: {
title: 'department',
section: 'department'
}
})
.otherwise({
redirectTo: '/'
});
}).config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
code: 'Code',
department: 'Deparment',
description: 'Description',
boss: 'Boss',
project: 'Project'
});
$translateProvider.translations('es', {
code: 'Código',
department: 'Deparmento',
description: 'Descripción',
boss: 'Jefe',
project: 'Proyecto'
});
$translateProvider.preferredLanguage('en');
// $translateProvider.useSanitizeValueStrategy('escapeParamenters');
}]);