angular js proveedor desconocido

Estoy tratando de “personalizar” el ejemplo de mongolab para que se ajuste a mi propia API de REST. Ahora me encuentro con este error y no estoy seguro de lo que estoy haciendo mal:

Error: Unknown provider: ProductProvider <- Product at Error (unknown source) at http://localhost:3000/js/vendor/angular.min.js:28:395 at Object.c [as get] (http://localhost:3000/js/vendor/angular.min.js:26:180) at http://localhost:3000/js/vendor/angular.min.js:28:476 at c (http://localhost:3000/js/vendor/angular.min.js:26:180) at d (http://localhost:3000/js/vendor/angular.min.js:26:314) 

Este es mi controlador:

 function ProductListCtrl($scope, Product) { $scope.products = Product.query(); } 

y este es el modulo:

 angular.module('productServices', ['ngResource']). factory('Product', ['$resource', function($resource){ var Product = $resource('/api/products/:id', { }, { update: { method: 'PUT' } }); return Product; }]); 

Su código se ve bien, de hecho funciona (aparte de las llamadas mismas) cuando se copia y pega en una muestra jsFiddle: http://jsfiddle.net/VGaWD/

Es difícil decir lo que está pasando sin ver un ejemplo más completo, pero espero que el jsFiddle anterior sea útil. Lo que sospecho es que no estás inicializando tu aplicación con el módulo ‘productServices’ . Daría el mismo error, podemos ver esto en otro jsFiddle: http://jsfiddle.net/a69nX/1/

Si está planeando trabajar con AngularJS y MongoLab , le sugiero que use un adaptador existente para $ resource y MongoLab : https://github.com/pkozlowski-opensource/angularjs-mongolab. Alivia mucho del dolor al trabajar con MongoLab, usted puede verlo en acción aquí: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ ¡Descargo de responsabilidad! Estoy manteniendo este adaptador (escrito en base a ejemplos de AngularJS) por lo que obviamente estoy parcializado aquí.

Recibí ese error porque estaba pasando un parámetro incorrecto a la definición de fábrica. Tuve:

 myModule.factory('myService', function($scope, $http)... 

Funcionó cuando eliminé $scope y cambié la definición de fábrica a:

 myModule.factory('myService', function( $http)... 

En caso de que necesite inyectar $scope , use:

 myModule.factory('myService', function($rootScope, $http)... 

Acabo de tener un problema similar. El error decía lo mismo que en la pregunta, intentaba resolverlo con la respuesta de pkozlowski.opensource y Ben G, que son respuestas correctas y buenas.

Mi problema fue realmente diferente con el mismo error:

en mi código HTML tuve la inicialización así …

  

Un poco más abajo traté de hacer algo como esto:

 

Me deshice de la primera … luego funcionó … obviamente no puedes inicializar ng-app dos o más veces. lo suficientemente justo.

Totalmente me olvidé de la primera “aplicación ng” y me frustraron por completo. Quizás esto ayude a alguien algún día …

Asegúrese de que su app.js principal incluya los servicios de los que depende. Por ejemplo:

 /* App Module */ angular.module('myApp', ['productServices']). ..... 

La respuesta de pkozlowski es correcta, pero por si a alguien le pasa esto, tuve el mismo error después de crear el mismo módulo dos veces por error; la segunda definición anulaba al proveedor del primero:

Creé el módulo haciendo

 angular.module('MyService'... ).factory(...); 

luego un poco más abajo en el mismo archivo:

 angular.module('MyService'... ).value('version','0.1'); 

La forma correcta de hacer esto es:

 angular.module('MyService'... ).factory(...).value('version','0.1'); 

En mi caso, he definido un nuevo proveedor, por ejemplo, xyz

 angular.module('test') .provider('xyz', function () { .... }); 

Cuando tenía que configurar el proveedor anterior, debe inyectarlo con Cadena de Provider xyzProvider -> xyz convierte en xyzProvider .

Ex:

 angular.module('App', ['test']) .config(function (xyzProvider) { // do something with xyzProvider.... }); 

Si se inyecta el proveedor anterior sin la cadena ‘Proveedor’, obtendrá el error similar en OP.

Al final del archivo JS para cerrar la función de fábrica que tenía

});

en lugar de

}());

Para agregar mi propia experiencia aquí, intentaba inyectar un servicio en una de las funciones de configuración de mi módulo. Este párrafo de los documentos que finalmente encontré explica por qué eso no funciona:

Durante el arranque de la aplicación, antes de que Angular desactive la creación de todos los servicios, configura e instaura todos los proveedores. Llamamos a esto la fase de configuración del ciclo de vida de la aplicación. Durante esta fase, los servicios no son accesibles porque aún no se han creado.

Lo que significa que puede inyectar proveedores en las funciones module.config (…), pero no puede inyectar servicios, para eso debe esperar hasta module.run (…) o exponer un proveedor que pueda inyectar al módulo. config

Para mí, este error fue causado al ejecutar la versión minificada de mi aplicación angular. Los documentos angulares sugieren una forma de evitar esto. Aquí está la cita relevante que describe el problema, y ​​usted puede encontrar la solución sugerida en los documentos aquí :

Una nota sobre la minimización Dado que Angular infiere las dependencias del controlador de los nombres de argumentos a la función de constructor del controlador, si minimizara el código JavaScript para el controlador PhoneListCtrl, todos sus argumentos de funciones también se minificarían, y el inyector de dependencia no lo haría ser capaz de identificar los servicios correctamente

Esto me llevó demasiado tiempo para localizarlo. Asegúrese de minimizar su controlador dentro de su directiva.

 .directive('my_directive', ['injected_item', function (injected_item){ return { controller: ['DO_IT_HERE_TOO', function(DO_IT_HERE_TOO){ }] } } 

Espero que ayude

Dado que este es el resultado superior para “angularjs unknown provider” en Google en este momento, aquí hay otro problema. Al realizar pruebas unitarias con Jasmine, asegúrese de tener esta statement en su función beforeEach() :

 module('moduleName'); 

De lo contrario, obtendrá el mismo error en sus pruebas.

Otro caso más donde se producirá este error, si su servicio se define en un archivo javascript por separado, ¡asegúrese de hacer referencia a él! Sí, lo sé, error de novato.

Para mí, el problema era la carga lenta; Cargué mi controlador y servicio tarde, por lo que no estaban disponibles en la carga de la página (y la inicialización angular). Hice esto con una etiqueta ui-if, pero eso es irrelevante. La solución fue cargar el servicio con la carga de página ya.

Aquí hay otro escenario posible en el que puede ver este error:

Si usa Sublime Text 2 y el complemento angular, generará stubs como este

 angular.module('utils', []) .factory('utilFactory', ['' function() { return { } } ]); 

observe el ” vacío ” como el primer elemento de la matriz después de la cadena ‘utilFactory’. Si no tiene ninguna dependencia, elimínela para que sea así:

 angular.module('utils', []) .factory('utilFactory', [ function() { return { } } ]); 

Me estaba olvidando de inyectar el archivo que contenía mis servicios por completo. Recuerde hacer esto al inicializar su módulo de aplicación:

 angular.module('myApp', ['myApp.services', ... ]); 

Como esta pregunta es el resultado principal de Google, agregaré otra cosa posible a la lista.

Si el módulo que está utilizando tiene un error en el contenedor de dependency injection, proporcionará el mismo resultado. Por ejemplo, copiar y pegar módulos de Internet puede depender de underscore.js e intentar inyectar con ‘_’ en el contenedor di. Si el subrayado no existe en los proveedores de dependencia de su proyecto, cuando el controlador intente hacer referencia a la fábrica de su módulo, obtendrá un “proveedor desconocido” para su fábrica en el registro de la consola del navegador.

El problema para mí fue que había algunos nuevos archivos javascript que creé que hacían referencia al servicio, pero Chrome solo vio la versión anterior. Un CTRL + F5 lo arregló para mí.

En mi caso, utilicé una función anónima como envoltorio para el módulo angular, así:

 (function () { var app = angular.module('myModule', []); ... })(); 

Después de cerrar el paréntesis, olvidé llamar a la función anónima abriendo y cerrando los paréntesis nuevamente como se indica arriba.

Obtuve un error de “proveedor desconocido” relacionado con angular-mocks (ngMockE2E) al comstackr mi proyecto con Grunt. El problema era que los simulacros angulares no se pueden minimizar, así que tuve que eliminarlos de la lista de archivos minificados.

Después de manejar este error también, puedo apoyar esta lista de respuestas con mi propio caso.

Es al mismo tiempo simple y tonto (tal vez no estúpido para principiantes como yo, pero sí para expertos), la referencia del script a angular.min.js debe ser la primera en su lista de scripts en la página html.

Esto funciona:

    

Esto no:

    

Aviso sobre angular.min.js.

Espero que ayude a alguien !! 🙂

Mi problema era con Yeoman, usando (en mayúscula):

 yo angular:factory Test 

Archivos hechos (no capitalizados):

 app/scripts/services/test.js 

pero el archivo index.html incluido (en mayúscula):

  

Espero que esto ayude a alguien.

Otra posibilidad más

Tenía unknown Provider <- <- nameOfMyService . El error fue causado por la siguiente syntax:

 module.factory(['', function() { ... }]); 

Angular estaba buscando la '' dependencia.

Mi escenario puede ser un poco oscuro, pero puede causar el mismo error y alguien puede experimentarlo, así que:

Al usar el servicio $ controller para instanciar un nuevo controlador (que esperaba ‘$ scope’ como primer argumento inyectado) estaba pasando el scope local del nuevo controlador al segundo parámetro de la función $ controller (). Esto llevó a Angular a intentar invocar un servicio $ scope que no existe ( aunque, por un tiempo, pensé que de alguna manera habría eliminado el servicio ‘$ scope’ de la memoria caché de Angular ). La solución es ajustar el scope local en un objeto local:

 // Bad: $controller('myController', newScope); // Good: $controller('myController, {$scope: newScope}); 

Ninguna de las respuestas anteriores funcionó para mí, tal vez estaba completamente equivocado, pero como principiante eso es lo que hacemos.

Estaba inicializando el controlador en un div para tener una lista:

  

Y luego usar $routeProvider para asignar una URL al mismo controlador. Tan pronto como eliminé el ng-init el controlador trabajó con la ruta.

Tuve el mismo problema Lo arreglé usando $('body').attr("ng-app", 'MyApp') lugar de para boostrap.

Porque lo hice

 angular.element(document).ready(function () { angular.bootstrap(document, [App.Config.Settings.AppName]); }) 

para los requisitos de architecture.

En mi aplicación Ruby on Rails, hice lo siguiente:

 rake assets:precompile 

Esto se hizo en el entorno de “desarrollo”, que había minificado Angular.js y lo había incluido en el archivo /public/assets/application.js .

Eliminar los archivos /public/assets/* resolvió el problema para mí.

Hoy me enfrenté a un problema similar y los problemas fueron realmente muy pequeños

  app.directive('removeFriend', function($scope) { return { restrict: 'E', templateUrl: 'removeFriend.html', controller: function($scope) { $scope.removing = false; $scope.startRemove = function() { $scope.removing = true; } $scope.cancelRemove = function() { $scope.removing = false; } $scope.removeFriend = function(friend) { var idx = $scope.user.friends.indexOf(friend) if (idx > -1) { $scope.user.friends.splice(idx, 1); } } } } }); 

Si observa el bloque anterior, en la primera línea observará que he inyectado $ scope por error, lo cual es incorrecto. Eliminé esa dependencia no deseada para resolver el problema.

  app.directive('removeFriend', function() { return { restrict: 'E', templateUrl: 'removeFriend.html', controller: function($scope) { $scope.removing = false; $scope.startRemove = function() { $scope.removing = true; } $scope.cancelRemove = function() { $scope.removing = false; } $scope.removeFriend = function(friend) { var idx = $scope.user.friends.indexOf(friend) if (idx > -1) { $scope.user.friends.splice(idx, 1); } } } } }); 

Otro ‘gotcha’: estaba recibiendo este error al inyectar $ timeout, y me tomó unos minutos darme cuenta de que tenía espacios en blanco en los valores de la matriz. Esto no funcionará:

 angular.module('myapp',[]. controller('myCtrl', ['$scope', '$timeout ', function ($scope, $timeout){ //controller logic } ]); 

Publicación solo en caso de que algún otro tenga un error tonto como este.

Mi caso era tipeo poco fiable

 myApp.factory('Notify',funtion(){ 

la función tiene una ‘c’!