AngularJs – Problemas al minificar por inyección de dependencias

AngularJs tiene la característica de manejar inyección de dependencia a través de los nombres de argumentos utilizados luego en el constructor de los controladores. Si utilizamos los programas comunes para minificar, estos argumentos serán cambiados de nombre y al no tener el mismo nombre que requiere Angular para el manejo de dependencias, simplemente no funcionará y la aplicación mostrará errores.

Teniendo un ejemplo común, definiendo Angular en un espacio global y utilizando la dependencia $scope como argumento:

angular.module("App", []).controller("Ctrl", function ($scope) {
    $scope.msj = "Hola Mundo";
});

angular.module("App", []).controller("Ctrl", function ($scope) {

$scope.msj = "Hola Mundo";

});

Al minificar se transformará de esta manera:

angular.module("App",[]).controller("Ctrl",function(a){a.msj ="Hola Mundo"});

1	angular.module("App",[]).controller("Ctrl",function(a){a.msj ="Hola Mundo"});

El argumento $scope se convierte simplemente en «a» y como consecuencia, fallará la inyección de dependencia.

Para evitar este problema existen varias maneras:

Minificadores y Herramientas

Si utilizas otros tipos de minificadores o herramientas constructoras como por ejemplo Yeoman https://yeoman.io/ las cuales toman en cuenta este problema y luego evitan cambiar el nombre de los argumentos.

Usando Arreglo

Una forma que es muy utilizada y que nos provee el propio Angular, es utilizar un arreglo en el segundo parámetro y este contendrá las dependencias en conjunto con la función constructora. Al usar un arreglo, el texto se mantiene intacto por los minificadores.

Ejemplo con arreglo:

angular.module("App", []).controller("Ctrl", ["$scope", function ($scope) {
    $scope.msj = "Hola Mudo";
}]);

angular.module("App", []).controller("Ctrl", ["$scope", function ($scope) {

$scope.msj = "Hola Mudo";

}]);

De ese modo se mantiene el scope al minificar:

angular.module("App",[]).controller("Ctrl",["$scope",function(o){o.msj="Hola Mudo"}]);

1	angular.module("App",[]).controller("Ctrl",["$scope",function(o){o.msj="Hola Mudo"}]);

Propiedad $inject

Otra forma también muy utilizada y que es parte del estándar de angular, es utilizar la propiedad $inject, que nos permite manejar una mejor estructura y de manera más legible.

angular.module("App", []).controller("Ctrl", Ctrl);

Ctrl.$inject = ["$scope", "$http"];
function Ctrl($scope, $http){
    // Lógica
}

angular.module("App", []).controller("Ctrl", Ctrl);

Ctrl.$inject = ["$scope", "$http"];

function Ctrl($scope, $http){

// Lógica

}

Claro que con esta forma el controlador deja de usar una función anónima y debemos definirla con nombre, luego se debe tomar en cuenta que para utilizarla se debe llamar por el nombre.