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:

Al minificar se transformará de esta manera:

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:

De ese modo se mantiene el scope al minificar:

 

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.

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *