angulaire js fournisseur inconnu
J'essaie de "personnaliser" l'exemple mongolab pour qu'il s'adapte à 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 a l'air bien, en fait il fonctionne (à part les 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. _ {Je soupçonne 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 suggérerais d'utiliser un adaptateur existant pour la ressource $ et MongoLab: https://github.com/pkozlowski-opensource/angularjs-mongolab Il facilite beaucoup la tâche avec MongoLab, vous pouvez le voir en action ici: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ Avertissement. Je maintiens cet adaptateur (basé sur 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'ai eu:
myModule.factory('myService', function($scope, $http)...
Cela fonctionnait lorsque j'ai supprimé le $scope et modifié la définition d'usine en:
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 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 bons.
Mon problème était en effet différent avec la même erreur:
dans mon code HTML, j'avais l'initialisation comme ça ...
<html ng-app>
Un peu plus bas, j'ai essayé de faire quelque chose comme ça:
<div id="cartView" ng-app="myApp" ng-controller="CartCtrl">
Je me suis débarrassé du premier ... alors cela a fonctionné ... évidemment vous ne pouvez pas initialiser ng-app deux fois ou plus. C'est suffisant.
J'ai totalement oublié le premier "ng-app" et j'ai été totalement frustré. Peut-être que ça va aider quelqu'un un jour ...
Assurez-vous que votre app.js principal 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 prévalait sur le fournisseur de la première:
J'ai créé le module en faisant
angular.module('MyService'...
).factory(...);
puis un peu plus loin dans le même fichier:
angular.module('MyService'...
).value('version','0.1');
La bonne façon de faire est:
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 configurez le fournisseur ci-dessus, vous devez l'injecter avec la chaîne 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 'Fournisseur', vous obtiendrez une erreur similaire dans OP.
Pour ajouter ma propre expérience ici, j'essayais d'injecter un service dans l'une de mes fonctions de configuration de module. Ce paragraphe de la documentation que j'ai finalement trouvé explique pourquoi cela ne fonctionne pas:
Lors du démarrage de l'application, avant de créer tous les services, Angular configure et instancie tous les fournisseurs. Nous appelons cela la phase de configuration du cycle de vie de l'application. Au cours de 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, vous devez donc attendre que module.run (...) ou exposer un fournisseur que vous pouvez injecter à module. config
Pour moi, cette erreur a été causée par l'exécution de la version abrégée de mon application angulaire. Les documents angulaires suggèrent un moyen de contourner ce problème. Voici la citation appropriée décrivant le problème, et vous pouvez trouver la solution proposée dans les docs eux-mêmes ici :
Note sur la minification Dans la mesure où Angular déduit les dépendances du contrôleur à partir des noms des arguments de la fonction constructeur du contrôleur, si vous réduisez le code JavaScript du contrôleur PhoneListCtrl, tous ses arguments de fonction seront également réduits et l'injecteur de dépendances ne pourra services correctement.
Cela m'a pris beaucoup trop de temps à traquer. Assurez-vous de minisafe 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
Encore un autre cas où cette erreur se produira, si votre service est défini dans un fichier javascript séparé, veillez à le référencer! Oui, je sais, erreur de recrue.
Etant donné que c’est le meilleur résultat pour "angularjs unknown provider" sur Google en ce moment, en voici un autre. Lorsque vous effectuez des tests unitaires avec Jasmine, assurez-vous que cette déclaration figure dans votre fonction beforeEach():
module('moduleName');
Sinon, vous obtiendrez la même erreur lors de vos tests.
Dans mon cas, j'ai utilisé une fonction anonyme comme wrapper pour le module angulaire, 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 à nouveau les parenthèses comme ci-dessus.
Voici un autre scénario possible où vous pouvez voir cette erreur:
Si vous utilisez Sublime Text 2 et le plugin angular, il générera des stubs comme celui-ci.
angular.module('utils', [])
.factory('utilFactory', [''
function() {
return {
}
}
]);
remarquez le '' vide comme premier élément du tableau après la chaîne 'utilFactory'. Si vous n'avez pas de dépendances, supprimez-le, c'est comme ça:
angular.module('utils', [])
.factory('utilFactory', [
function() {
return {
}
}
]);
J'oubliais d'injecter le fichier qui contenait complètement mes services. N'oubliez pas de le faire lors de l'initialisation de votre module d'application:
angular.module('myApp', ['myApp.services', ... ]);
Le problème pour moi était qu'il y avait quelques nouveaux fichiers javascript que j'ai créés et qui faisaient référence au service. Pourtant, Chrome ne voyait que l'ancienne version. Un CTRL + F5 l'a corrigé pour moi.
Pour moi, le problème était le chargement paresseux; J'ai chargé mon contrôleur et le service en retard, de sorte qu'ils n'étaient pas disponibles au chargement de la page (et à l'initialisation angulaire). Je l'ai fait avec une balise ui-if, mais ce n'est pas pertinent… .. La solution a été de charger le service avec le chargement de page déjà.
Puisque cette question est top google result, je vais ajouter une autre chose possible à la liste.
Si le module que vous utilisez rencontre un échec sur l'encapsuleur d'injection de dépendance, il produit le même résultat. Par exemple, copier et coller des modules sur Internet peut s’appuyer sur underscore.js et tenter d’injecter avec «_» dans le di wrapper. S'il n'y a pas de trait de soulignement dans vos fournisseurs de dépendance de projet, lorsque votre contrôleur tente de référencer la fabrique de votre module, il obtiendra le «fournisseur inconnu» de votre fabrique dans le journal de la console du navigateur.
Dans mon application Ruby on Rails, j'avais effectué les opérations suivantes:
rake assets:precompile
Cela a été fait dans l'environnement de 'développement', qui avait réduit Angular.js et l'avait inclus dans le fichier /public/assets/application.js.
Supprimer les fichiers /public/assets/* a résolu le problème pour moi.
J'ai eu une erreur de "fournisseur inconnu" liée à angular-mock (ngMockE2E) lors de la compilation de mon projet avec Grunt. Le problème était que les simulacres angulaires ne pouvaient pas être minifiés, j'ai donc dû le supprimer de la liste des fichiers minifiés.
Mon scénario est peut-être un peu obscur, mais il peut causer la même erreur et être vécu par quelqu'un, alors:
Lors de l'utilisation du service $ controller pour instancier un nouveau contrôleur (qui attendait '$ scope' en tant que premier argument injecté), je passais la portée locale du nouveau contrôleur dans le second paramètre de la fonction $ controller (). Cela a amené Angular à essayer d’invoquer un service $ scope qui n’existait 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 portée locale dans un objet locals:
// 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'étais en train d'initialiser le contrôleur dans une div afin d'avoir une liste:
<div ng-controller="CategoryController" ng-init="initialize()">
Et ensuite, en utilisant $routeProvider pour mapper une URL sur le même contrôleur. Dès que j'ai supprimé le ng-init, le contrôleur a travaillé avec la route.
Encore une autre possibilité.
J'ai eu unknown Provider <- <- nameOfMyService. L'erreur a été causée par la syntaxe suivante:
module.factory(['', function() { ... }]);
Angular recherchait la dépendance ''.
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):
<script src="scripts/services/Test.js"></script>
J'espère que ça aide quelqu'un.
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 {
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 vous observez le bloc ci-dessus, à la première ligne, vous remarquerez 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 {
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);
}
}
}
}
});
Après avoir traité cette erreur aussi, je peux prendre en charge 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 de script à angular.min.js doit être la première de votre liste de scripts dans la page html.
Cela marche:
<script src="Scripts/angular.min.js"></script>
<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>
Ce n'est pas:
<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>
<script src="Scripts/angular.min.js"></script>
Avis sur le angular.min.js.
J'espère que ça aide n'importe qui !! :)
J'ai eu cette erreur après avoir créé une nouvelle usine et l'utiliser dans un composant, mais je n'ai pas vérifié les spécifications de ces composants.
donc si l'échec dans vos fichiers de test (spécifications)
vous devez ajouter
beforeEach(module('YouNewServiceModule'));
J'ai eu le même problème. J'ai corrigé cela en utilisant $('body').attr("ng-app", 'MyApp') au lieu de <body ng-app="MyApp"> pour amorcer.
Parce que j'ai fait
angular.element(document).ready(function () {
angular.bootstrap(document, [App.Config.Settings.AppName]);
})
pour les exigences d'architecture.