angular js fournisseur inconnu

152

J'essaye 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;
    }]);

angularjs Stefan Ernst
la source

Cette erreur indique qu'angular ne connaît pas l'usine du produit, assurez-vous que le JS pour ce service est une référence en premier. De plus, lors de la déclaration des modules, assurez-vous de définir explicitement les dépendances, car lorsque les fichiers sont minimisés, cette erreur survient également en raison de la modification du nom. Pour plus d'informations, consultez cet article :: ozkary.com/2015/11/…

ozkary

130

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. Ce que je soupçonne, c'est que vous n'initialisez pas votre application avec le module 'productServices' . Cela donnerait la même erreur, nous pouvons 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 Cela soulage une grande partie de la douleur en travaillant avec MongoLab, vous pouvez le voir en action ici: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ Disclaimer! Je maintiens cet adaptateur (écrit sur la base d'exemples AngularJS) donc je suis évidemment biaisé ici.

pkozlowski.opensource
la source

J'ai le même problème et cela n'a pas résolu mon problème. En fait, je récupère des données ... Sauf pour ce message d'erreur, vous penseriez que tout fonctionnait très bien. Cependant, je n'utilise pas ng-app dans l'élément body, je bootstrap comme ceci: angular.element (document) .ready (function () {angular.bootstrap (document, ['reportServices']);});

Tom

17

Salut les gars, c'est un peu gênant. J ai exactement le même problème. Mais je ne peux pas repérer la différence entre les 2 jsFiddles. Toute indication sur l'endroit où chercher exactement est très appréciée.

schacki

4

@schacki, La différence entre les violons peut être trouvée dans l'onglet info. L'un d'eux a un corps avec <body ng-app="productServices">et l'autre a <body ng-app="">.

Vineet Reynolds

Et où est l'onglet info? :)

Aleks

3

On dirait que l'onglet info est maintenant l' Fiddle Optionsonglet sur la droite

Gangstead

40

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 a fonctionné lorsque j'ai supprimé le $scopeet changé la définition d'usine en:

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

Au cas où vous auriez besoin d'injecter $scope, utilisez:

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

développeur
la source

32

J'ai juste eu un problème similaire. L'erreur a dit la même chose dans la question, a essayé de la résoudre avec la réponse de pkozlowski.opensource et Ben G, qui sont tous deux des réponses correctes et bonnes.

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

dans mon HTML-Code j'ai eu l'initialisation comme ça ...

<html ng-app>

Un peu plus bas, j'ai essayé de faire quelque chose comme ceci:

<div id="cartView" ng-app="myApp" ng-controller="CartCtrl">

Je me suis débarrassé du premier ... puis ça a marché ... é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 ...

Preexo
la source

2

J'ai eu un problème similaire, mais dans mon cas, le fait d' avoir ng-controller spécifié dans le div était le coupable d'un contrôleur qui référence le service. Il semble qu'Angular ne savait pas comment résoudre le service lors de l'analyse de la vue.

Hector Correa

25

Assurez-vous que votre principal app.jscomprend les services dont il dépend. Par exemple:

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

DébutantAngularJs
la source

1

Si je ne me trompe pas, dans ce cas productServicesdevrait être un module, donc ce qui est à l'intérieur de ce module (services ou non) n'a pas d'importance.

greenoldman

17

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 bas dans le même fichier:

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

La bonne façon de procéder est:

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

Ben G
la source

11

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

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

Lorsque vous deviez configurer le fournisseur ci-dessus, vous devez l'injecter avec la Providerchaîne ajoutée -> xyzdevientxyzProvider .

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 obtiendrez l'erreur similaire dans OP.

Manikanta
la source

8

À la fin du fichier JS pour fermer la fonction d'usine que j'avais

});

au lieu de

}());

Milo P
la source

1

Pour mon projet, nous utilisons habituellement})();

mrOak

5

Cela m'a pris beaucoup trop de temps à retrouver. Assurez-vous que vous 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

pk1m
la source

5

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:

Pendant le démarrage de l'application, avant qu'Angular ne commence à créer 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 module. config

Stewart A
la source

4

Pour moi, cette erreur a été causée par l'exécution de la version minifiée de mon application angulaire. Les documents angulaires 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 :

Remarque sur la minimisation Puisque Angular déduit les dépendances du contrôleur à partir des noms d'arguments de la fonction de constructeur du contrôleur, si vous réduisiez le code JavaScript pour le contrôleur PhoneListCtrl, tous ses arguments de fonction seraient également minifiés, et l'injecteur de dépendances ne le serait pas être en mesure d'identifier correctement les services.

Sasha
la source

3

Puisqu'il s'agit du 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 beforeEach()fonction:

module('moduleName');

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

roufamatic
la source

3

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

Jason
la source

2

J'oubliais d'injecter le fichier qui regroupait mes services. N'oubliez pas de le faire lors de l'initialisation de votre module d'application:

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

jorisw
la source

2

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é les parenthèses, j'ai oublié d'appeler la fonction anonyme en ouvrant et fermant à nouveau les parenthèses comme ci-dessus.

Emanuele Bellini
la source

Je sais que vous y avez répondu il y a 4 ans, mais cela m'a aidé aujourd'hui, merci.

Legolas

1

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 angulaire). 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à.

Gonfi den Tschal
la source

1

Voici un autre scénario possible dans lequel 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 aucune dépendance, supprimez-la pour que ce soit comme ceci:

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

        }
    }
]);

dustin.schultz
la source

1

Puisque cette question est le meilleur résultat de Google, j'ajouterai une autre chose possible à la liste.

Si le module que vous utilisez a un échec sur le wrapper d'injection de dépendances, il fournira ce même résultat. Par exemple, les modules copier-coller à partir d'Internet peuvent s'appuyer sur underscore.js et tenter d'injecter avec '_' dans le wrapper di. 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 l'usine de votre module, il obtiendra «fournisseur inconnu» pour votre usine dans le journal de la console du navigateur.

user1082202
la source

1

Le problème pour moi était qu'il y avait de nouveaux fichiers javascript que j'ai créés qui faisaient référence au service, mais Chrome n'a vu que l'ancienne version. Un CTRL + F5 l'a corrigé pour moi.

mortey
la source

0

J'ai eu une erreur de "fournisseur inconnu" liée à angular-mocks (ngMockE2E) lors de la compilation de mon projet avec Grunt. Le problème était que les simulations angulaires ne pouvaient pas être minifiées, j'ai donc dû le supprimer de la liste des fichiers minifiés.

Fausak rouillé
la source

0

Après avoir traité cette erreur également, je peux soutenir 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>

Remarquez à propos de angular.min.js.

J'espère que cela aide n'importe qui !! :)

Joe Lewis
la source

0

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 cela aide quelqu'un.

Corey Rothwell
la source

0

Encore une autre possibilité.

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

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

Angular cherchait la ''dépendance.

Hugo Wood
la source

Erreur: [$ injector: non] Fournisseur inconnu: LoginFactoryProvider <- LoginFactory j'ai celui-ci, alors comment puis-je résoudre celui-ci

ninjaXnado

0

Mon scénario peut être un peu obscur mais il peut provoquer la même erreur et quelqu'un peut en faire l'expérience, donc:

Lors de l'utilisation du service $ controller pour instancier un nouveau contrôleur (qui attendait '$ scope' comme premier argument injecté), je passais la portée locale du nouveau contrôleur dans le deuxième paramètre de la fonction $ controller (). Cela a conduit Angular à essayer d'appeler un service $ scope qui n'existe pas ( bien que, pendant un moment, j'ai en fait pensé que j'aurais supprimé le service '$ scope' du cache d'Angular ). La solution consiste à envelopper la portée locale dans un objet local:

// Bad:
$controller('myController', newScope);

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

Zac Seth
la source

0

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

J'initialisais le contrôleur dans un divafin d'avoir une liste:

 <div ng-controller="CategoryController" ng-init="initialize()">

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

jfs.csantos
la source

0

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"> boostrap.

Parce que j'ai fait

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

pour les exigences d'architecture.

Jokerm
la source

0

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 minifié Angular.js et l'a inclus dans le /public/assets/application.jsfichier.

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

Nigel Sheridan-Smith
la source

0

J'ai rencontré 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, dans la première ligne, vous observerez 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);
            }
        }
    }
}
});

Rakesh Burbure
la source

0

J'ai eu cette erreur après avoir créé une nouvelle usine et l'ai utilisée dans un composant mais je n'ai pas vérifié les spécifications de ces composants

donc si l'échec de vos fichiers de test (spécifications)

tu dois ajouter beforeEach(module('YouNewServiceModule'));

Basheer AL-MOMANI
la source

-1

Un autre «piège»: j'obtenais cette erreur en injectant $ timeout, et il m'a fallu quelques minutes pour réaliser 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 idiote comme celle-ci.

Lukus
la source

-2

Mon cas était douteux en tapant

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

la fonction a un «c»!

a atterri
la source

angular js fournisseur inconnu

Réponses: