angular js unknown provider

J’essaie de “personnaliser” l’exemple mongolab pour l’adapter à ma propre API REST. Maintenant, je rencontre cette erreur et je ne suis pas sûr de ce que je fais 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) 

Ceci est mon contrôleur:

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

et voici le module:

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

Votre code semble bon, en fait, il fonctionne (en dehors des appels eux-mêmes) lorsqu’il est copié et collé dans un exemple jsFiddle: http://jsfiddle.net/VGaWD/

Difficile de dire ce qui se passe sans voir un exemple plus complet mais j’espère que le jsFiddle ci-dessus sera utile. Ce que je soupçonne, c’est que vous n’initialisez pas votre application avec le module ‘productServices’ . Cela donnerait la même erreur, on peut le voir dans un autre jsFiddle: http://jsfiddle.net/a69nX/1/

Si vous envisagez de travailler avec AngularJS et MongoLab, je vous suggère d’utiliser un adaptateur existant pour la ressource $ et MongoLab : https://github.com/pkozlowski-opensource/angularjs-mongolab peut le voir en action ici: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ Disclaimer! Je maintiens cet adaptateur (écrit sur la base des exemples AngularJS) donc je suis évidemment biaisé ici.

J’ai eu cette erreur parce que je passais un paramètre incorrect à la définition d’usine. J’avais:

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

Cela a fonctionné quand j’ai enlevé la $scope et changé la définition d’usine pour:

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

Si vous devez injecter $scope , utilisez:

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

Je viens d’avoir un problème similaire. L’erreur a dit la même chose dans la question, a essayé de le résoudre avec la réponse de pkozlowski.opensource et Ben G, qui sont tous deux corrects et de bonnes réponses.

Mon problème était effectivement différent avec la même erreur:

dans mon code HTML j’ai eu l’initialisation comme ça …

  

Un peu plus loin, j’ai essayé de faire quelque chose comme ceci:

 

Je me suis débarrassé du premier … alors ça a fonctionné … évidemment tu ne peux pas initialiser ng-app deux fois ou plus. C’est suffisant.

J’ai totalement oublié le premier “ng-app” et j’ai été complètement frustré. Peut-être que ça va aider quelqu’un un jour …

Assurez-vous que votre app.js principale inclut les services dont il dépend. Par exemple:

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

La réponse de pkozlowski est correcte, mais juste au cas où cela arriverait à quelqu’un d’autre, j’ai eu la même erreur après avoir créé le même module deux fois par erreur; la deuxième définition a supplanté le fournisseur du premier:

J’ai créé le module en faisant

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

puis un peu plus bas dans le même fichier:

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

La manière correcte de le faire est la suivante:

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

Dans mon cas, j’ai défini un nouveau fournisseur, disons xyz

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

Lorsque vous avez configuré le fournisseur ci-dessus, vous devez l’injecter avec la chaîne du Provider ajoutée -> xyz devient xyzProvider .

Ex:

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

Si vous injectez le fournisseur ci-dessus sans la chaîne “Provider”, vous obtenez l’erreur similaire dans OP.

A la fin du fichier JS pour fermer la fonction usine, j’avais

});

au lieu de

}());

Pour append ma propre expérience, j’essayais d’injecter un service dans l’une de mes fonctions de configuration de module. Ce paragraphe des documents que j’ai finalement trouvé explique pourquoi cela ne fonctionne pas:

Au démarrage de l’application, avant qu’Angular ne crée tous les services, il configure et instancie tous les fournisseurs. Nous appelons cela la phase de configuration du cycle de vie de l’application. Pendant cette phase, les services ne sont pas accessibles car ils n’ont pas encore été créés.

Cela signifie que vous pouvez injecter des fournisseurs dans les fonctions module.config (…), mais vous ne pouvez pas injecter de services, pour cela vous devez attendre jusqu’à module.run (…), ou exposer un fournisseur que vous pouvez injecter dans le module. config

Pour moi, cette erreur a été provoquée par l’exécution de la version réduite de mon application angular. Les documents angulars suggèrent un moyen de contourner ce problème. Voici la citation pertinente décrivant le problème, et vous pouvez trouver la solution suggérée dans les documents eux-mêmes ici :

Une note sur la réduction Puisque Angular déduit les dépendances du contrôleur des noms des arguments à la fonction constructeur du contrôleur, si vous deviez minimiser le code JavaScript pour le contrôleur PhoneListCtrl, tous ses arguments de fonction seraient également réduits, et l’injecteur de dépendance ne serait pas être capable d’identifier les services correctement.

Cela m’a pris trop de temps pour retrouver la trace. Assurez-vous de minimiser votre contrôleur dans votre directive.

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

J’espère que cela pourra aider

Puisque c’est le meilleur résultat pour “angularjs unknown provider” sur Google en ce moment, voici un autre piège. Lorsque vous effectuez des tests unitaires avec Jasmine, assurez-vous d’avoir cette instruction dans votre fonction beforeEach() :

 module('moduleName'); 

Sinon, vous aurez la même erreur dans vos tests.

Encore un autre cas où cette erreur se produira, si votre service est défini dans un fichier javascript distinct, assurez-vous de le référencer! Oui, je sais, erreur de recrue.

Pour moi, le problème était le chargement paresseux; J’ai chargé mon contrôleur et mon service en retard, ils n’étaient donc pas disponibles au chargement de la page (et à l’initialisation angular). Je l’ai fait avec une balise ui-if, mais ce n’est pas pertinent. La solution consistait à charger le service avec le chargement de la page déjà.

Voici un autre scénario possible dans lequel vous pouvez voir cette erreur:

Si vous utilisez Sublime Text 2 et le plug-in angular, il générera des stubs comme celui-ci.

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

notez le vide ” comme premier élément du tableau après la chaîne ‘utilFactory’. Si vous n’avez aucune dépendance, supprimez-la pour que ce soit comme ceci:

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

J’avais oublié d’injecter le fichier contenant tous mes services. N’oubliez pas de le faire lors de l’initialisation de votre module d’application:

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

Étant donné que cette question est le meilleur résultat de Google, je vais append une autre chose possible à la liste.

Si le module que vous utilisez a un échec sur le wrapper d’dependency injection, il fournira le même résultat. Par exemple, les modules copier-coller sur Internet peuvent s’appuyer sur underscore.js et tenter d’injecter avec ‘_’ dans le wrapper. Si le trait de soulignement n’existe pas dans les fournisseurs de dépendances de votre projet, lorsque votre contrôleur tente de référencer la fabrique de votre module, il obtiendra un fournisseur inconnu pour votre fabrique dans le journal de la console du navigateur.

Le problème pour moi était que de nouveaux fichiers javascript que je créais faisaient référence au service alors que Chrome ne voyait que l’ancienne version. Un CTRL + F5 l’a corrigé pour moi.

Dans mon cas, j’ai utilisé une fonction anonyme comme enveloppe pour le module angular, comme ceci:

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

Après avoir fermé la parenthèse, j’ai oublié d’appeler la fonction anonyme en ouvrant et en fermant les parenthèses comme ci-dessus.

J’ai eu une erreur “fournisseur inconnu” liée à des mordus angulars (ngMockE2E) lors de la compilation de mon projet avec Grunt. Le problème était que les simulations angulars ne pouvaient pas être minifiées, alors je devais les supprimer de la liste des fichiers minifiés.

Après avoir traité cette erreur aussi, je peux supporter cette liste de réponses avec mon propre cas.

C’est à la fois simple et stupide (peut-être pas idiot pour les débutants comme moi, mais oui pour les experts), la référence au script angular.min.js doit être la première de votre liste de scripts dans la page HTML.

Cela marche:

    

Ce n’est pas:

    

Avis sur les angular.min.js.

J’espère que ça aide quelqu’un !! 🙂

Mon problème était avec Yeoman, en utilisant (en majuscule):

 yo angular:factory Test 

Fichiers créés (non capitalisés):

 app/scripts/services/test.js 

mais le fichier index.html inclus (en majuscule):

  

J’espère que cela aide quelqu’un.

Encore une autre possibilité.

J’avais unknown Provider < - <- nameOfMyService . L'erreur a été provoquée par la syntaxe suivante:

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

Angular cherchait la dépendance.

Mon scénario peut être un peu obscur mais cela peut provoquer la même erreur et quelqu’un peut le ressentir, donc:

Lorsque vous utilisez le service $ controller pour instancier un nouveau contrôleur (qui attendait “$ scope” comme premier argument injecté), je transmettais la scope locale du nouveau contrôleur au second paramètre de la fonction $ controller (). Cela a conduit Angular à essayer d’invoquer un service $ scope qui n’existe pas ( même si, pendant un moment, j’ai pensé que je supprimerais le service ‘$ scope’ du cache d’Angular ). La solution consiste à envelopper la scope locale dans un object local:

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

Aucune des réponses ci-dessus n’a fonctionné pour moi, peut-être que je me trompais complètement, mais en tant que débutant, c’est ce que nous faisons.

J’initialisais le contrôleur dans un div afin d’avoir une liste:

  

Et puis en utilisant $routeProvider pour mapper une URL sur le même contrôleur. Dès que j’ai retiré le ng-init le contrôleur a travaillé avec l’itinéraire.

J’ai eu le même problème. J’ai corrigé cela en utilisant $('body').attr("ng-app", 'MyApp') au lieu de à booster.

Parce que je l’ai fait

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

pour les exigences de l’architecture.

Dans mon application Ruby on Rails, j’avais fait ce qui suit:

 rake assets:precomstack 

Cela a été fait dans l’environnement de développement, qui avait minifié Angular.js et l’avait inclus dans le fichier /public/assets/application.js .

La suppression des fichiers /public/assets/* résolu le problème pour moi.

J’ai fait face à un problème similaire aujourd’hui et les problèmes étaient vraiment très petits

  app.directive('removeFriend', function($scope) { return { ressortingct: '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 vous observez le bloc ci-dessus, vous remarquerez dans la première ligne que j’ai injecté $ scope par erreur, ce qui est incorrect. J’ai supprimé cette dépendance indésirable pour résoudre le problème.

  app.directive('removeFriend', function() { return { ressortingct: '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); } } } } }); 

Un autre ‘gotcha’: je recevais cette erreur en injectant $ timeout, et il m’a fallu quelques minutes pour me rendre compte que j’avais des espaces dans les valeurs du tableau. Cela ne fonctionnera pas:

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

Publier juste au cas où quelqu’un d’autre aurait une erreur stupide comme celle-ci.

Mon cas était tapageur

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

la fonction a un ‘c’!