I have a SPA application working perfectly so far. It had been developed in JavaScript using AngularJS (+ other libs).
Now, I want to minify the scripts and I'm testing both yuicompressor and Google's compiler.
As soon as I deploy the minified version of the script and test it, I get an error.
The JavaScript file prior to minifying is:
var MyApp_Sim_Web = angular.module( 'MyApp_Sim_Web', ['ngRoute' , 'ngSanitize']) ;
//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
//----------------------------------------------------------------------- $routeProvider ------------------------------------------------------------------------
//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
MyApp_Sim_Web.config(function($routeProvider) {
$routeProvider
.when ('/Login', {
templateUrl: 'Pages/Login.html' ,
controller: 'LoginController'
})
.when ('/', {
templateUrl: 'Pages/Login.html' ,
controller: 'LoginController'
})
.when ('/User_Main', {
templateUrl: 'Pages/User_Main.html' ,
controller: 'UserController'
})
.otherwise({ redirectTo: '/' });
});
//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
//----------------------------------------------------------------------- $IndexController ----------------------------------------------------------------------
//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
MyApp_Sim_Web.filter('Make_Timestamp_Readable', function() {
return function(input) {
var date = new String(input),
year = date[ 0] + date[ 1] +
date[ 2] + date[ 3] ,
month = date[ 4] + date[ 5] ,
day = date[ 6] + date[ 7] ,
hour = date[ 8] + date[ 9] ,
minute = date[10] + date[11] ,
seconds = date[12] + date[13] ;
var reformattedDate = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + seconds;
var newDate = new Date(reformattedDate);
return newDate;
};
});
//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
//----------------------------------------------------------------------- $IndexController ----------------------------------------------------------------------
//-----------------------------------------------------------------------------------------------------------------------------------------------------------------
MyApp_Sim_Web.controller('IndexController' , ['$rootScope' , '$scope' , '$log' , '$location' , '$sce' , 'DB_Services' , function( $rootScope , $scope , $log , $location , $sce , DB_Services ) {
// Following declaration is aimed to enable access to DB from any controller.
$rootScope.Handle_DB_Request = function(p_Query , p_Callback) {
DB_Services(p_Query).then(function(d) {
p_Callback(d) ;
});
};
} ]) ;
The minified version using yuicompressor is:
var MyApp_Sim_Web=angular.module("MyApp_Sim_Web",["ngRoute","ngSanitize"]);MyApp_Sim_Web.config(function(a){a.when("/Login",{templateUrl:"Pages/Login.html",controller:"LoginController"}).when("/",{templateUrl:"Pages/Login.html",controller:"LoginController"}).when("/User_Main",{templateUrl:"Pages/User_Main.html",controller:"UserController"}).otherwise({redirectTo:"/"})});MyApp_Sim_Web.filter("Make_Timestamp_Readable",function(){return function(g){var a=new String(g),e=a[0]+a[1]+a[2]+a[3],d=a[4]+a[5],f=a[6]+a[7],c=a[8]+a[9],b=a[10]+a[11],i=a[12]+a[13];var j=e+"-"+d+"-"+f+" "+c+":"+b+":"+i;var h=new Date(j);return h}});MyApp_Sim_Web.controller("IndexController",["$rootScope","$scope","$log","$location","$sce","DB_Services",function(b,d,e,f,c,a){b.Handle_DB_Request=function(h,g){a(h).then(function(i){g(i)})}}]);
and the same using Google's compiler is:
var MyApp_Sim_Web=angular.module("MyApp_Sim_Web",["ngRoute","ngSanitize"]);MyApp_Sim_Web.config(function(a){a.when("/Login",{templateUrl:"Pages/Login.html",controller:"LoginController"}).when("/",{templateUrl:"Pages/Login.html",controller:"LoginController"}).when("/User_Main",{templateUrl:"Pages/User_Main.html",controller:"UserController"}).otherwise({redirectTo:"/"})});
MyApp_Sim_Web.filter("Make_Timestamp_Readable",function(){return function(a){a=new String(a);return new Date(a[0]+a[1]+a[2]+a[3]+"-"+(a[4]+a[5])+"-"+(a[6]+a[7])+" "+(a[8]+a[9])+":"+(a[10]+a[11])+":"+(a[12]+a[13]))}});MyApp_Sim_Web.controller("IndexController",["$rootScope","$scope","$log","$location","$sce","DB_Services",function(a,d,e,f,g,b){a.Handle_DB_Request=function(a,c){b(a).then(function(a){c(a)})}}]);
The error I get (Chome's console) is:
[$injector:modulerr] http://errors.angularjs.org/1.4.0-rc.1/$injector/modulerr?p0=PayPlus_Sim_We…2F%2F127.0.0.1%3A59561%2FPublic_Libs%2FAngular%2Fangular.min.js%3A39%3A416)
It is quite strange since, as stated, without the minification the application works perfectly (no error at all of any kind in console).
Does anyone have any idea what is going on?
Thanks in advance.
MyApp_Sim_Web.config(function($routeProvider) {==>MyApp_Sim_Web.config(['$routeProvider', function($routeProvider) {.toString()from the function. It then uses the physical argument names in your function definition to look up the dep. When you minify it renames function arguments meaning angular tries to look for a dependency that doesn't exist. Using the array notation aliases it, so angular looks for deps by the array value not argument name. So every where you inject something you should use the array notation.