Material‎ > ‎Software‎ > ‎Angular 1.x con ES6‎ > ‎

Errores en la inyección de dependencias

Angular trabaja con inyección de dependencias por convención, de manera que cuando comenzamos a trabajar en esta tecnología es frecuente que la aplicación no funciona como esperamos. Para poder ver los errores que ocurren en el cliente, activamos las herramientas de desarrollo del browser con F12 y vemos que aparece un mensaje de error similar a 

angular.js:11008 Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=librosServiceProvider%20%3C-%20librosService%20%3C-%20TodosLosLibrosCtrl
    at angular.js:38
    at angular.js:4789

Este error se da porque cambiamos la convención por defecto, entonces conviene revisar:

  1. Si en el archivo index.html escribimos en el orden correcto las definiciones. Por lo general deberíamos tener
    1. primero los objetos de dominio, si hay
    2. luego, los services
    3. luego los controllers
    4. y por último las definiciones de la aplicación Angular (app)
  2. Si el paso anterior está ok, posiblemente tengamos un problema con el nombre con el que escribimos alguna de las dependencias. Por ejemplo en este caso:
angular
.module('librosApp', ['ngAnimate', 'ngResource', 'chieffancypants.loadingBar'])
.factory('libros', librosService)
.controller('TodosLosLibrosCtrl', LibrosController)


Esto implica que en el controller deberíamos inyectar nuestro objeto factory como libros. No obstante, vemos que en el controller hay otro nombre de variable:

class LibrosController {
constructor($timeout, librosService) {

Entonces, hay que corregir en alguno de los dos lugares:

angular
.module('librosApp', ['ngAnimate', 'ngResource', 'chieffancypants.loadingBar'])
.factory('librosService', librosService)
.controller('TodosLosLibrosCtrl', LibrosController)


Ahora sí, la aplicación funciona ok.

Lo mismo puede ocurrirnos con los nombres definidos para el controller y luego usados en la vista  html, así que debemos ser cuidadosos de esa convención (o bien trabajarlo manualmente).

Comments