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.

Comparte
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Dejar un comentario

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

*

code