99 votes

Fournisseur inconnu : $modalProvider <- $modal erreur avec AngularJS

Je continue à recevoir cette erreur lorsque j'essaie de mettre en œuvre la fenêtre modale de bootstrap. Quelle pourrait en être la cause ? J'ai tout copié/collé de http://angular-ui.github.io/bootstrap/#/modal ici.

201voto

m59 Points 16781

Ce type d'erreur se produit lorsque vous écrivez une dépendance pour un contrôleur, un service, etc., et que vous n'avez pas créé ou inclus cette dépendance.

Dans ce cas, $modal n'est pas un service connu. Il semble que vous n'ayez pas passé ui-bootstrap comme dépendance lors du démarrage d'Angular. angular.module('myModule', ['ui.bootstrap']); Vérifiez également que vous utilisez la dernière version de ui-bootstrap (0.6.0), par sécurité.

L'erreur est déclenchée dans la version 0.5.0, mais la mise à jour vers la version 0.6.0 rend le service $modal disponible. Donc, mettez à jour vers la version 0.6.0 et assurez-vous d'exiger ui.boostrap lorsque vous enregistrez votre module.

Je réponds à votre commentaire : C'est ainsi que l'on injecte une dépendance de module.

<!-- tell Angular what module we are bootstrapping -->
<html ng-app="myApp" ng-controller="myCtrl">

js :

// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);

// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {

});

Mise à jour :

En $modal a été renommé en $uibModal .

Exemple d'utilisation de $uibModal

// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);

// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
    //code here
});

55voto

Brent Points 465

5 ans plus tard (cela n'aurait pas été le problème à l'époque) :

L'espacement des noms a changé - vous pouvez tomber sur ce message après avoir effectué une mise à niveau vers une version plus récente de l'application bootstrap-ui ; vous devez vous référer à $uibModal & $uibModalInstance .

22voto

CREOFF Points 171

Juste une remarque supplémentaire sur un problème que j'ai également rencontré aujourd'hui : J'ai eu une erreur similaire " Unknown provider : $aProvider" lorsque j'ai activé la minification/uglify. de mon code source.

Comme mentionné dans le Tutoriel Angular docs (paragraphe : "A Note on Minification") vous devez utiliser la syntaxe des tableaux pour vous assurer que les références sont conservées correctement pour l'injection de dépendances :

var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

Pour le Exemple d'Angular UI Bootstrap vous mentionnez que vous devriez remplacer ceci par cela :

var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
   /* ...example code.. */
}

avec cette notation de tableau :

var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) { 
   /* copy rest of example code here */ 
}];

Grâce à cette modification, mon code de fenêtre modale Angular UI minifié était à nouveau fonctionnel.

11voto

ozkary Points 2020

La réponse évidente pour l'erreur du fournisseur est la dépendance manquante lors de la déclaration d'un module comme dans le cas de l'ajout de ui-bootstrap. La seule chose que beaucoup d'entre nous ne prennent pas en compte, ce sont les changements de rupture lors de la mise à niveau vers une nouvelle version. Oui, ce qui suit devrait fonctionner et ne pas provoquer l'erreur du fournisseur :

var app = angular.module('app', ['ui.router', 'ngRoute', 'ui.bootstrap']);
app.factory("$svcMessage", ['$modal', svcMessage]);

Sauf lorsque l'on utilise une nouvelle version de ui-boostrap. Le fournisseur modal est maintenant défini comme :

.provider('$uibModal', function() {
    var $modalProvider = {
      options: {
        animation: true,
        backdrop: true, //can also be false or 'static'
        keyboard: true
      },

Le conseil ici est qu'une fois que nous nous sommes assurés que les dépendances sont incluses et que nous obtenons toujours cette erreur, nous devons vérifier quelle version de la bibliothèque JS nous utilisons. Nous pourrions également faire une recherche rapide et voir si ce fournisseur existe dans le fichier.

Dans ce cas, le fournisseur modal devrait maintenant être le suivant :

app.factory("$svcMessage", ['$uibModal', svcMessage]);

Une note supplémentaire. Assurez-vous que votre version de ui-bootstrap supporte votre version actuelle d'angularjs. Sinon, vous pouvez obtenir d'autres erreurs comme templateProvider.

Pour plus d'informations, consultez ce lien :

http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html

J'espère que cela vous aidera.

8voto

Yogi Points 117

Après avoir vérifié que toutes les dépendances étaient incluses, j'ai résolu le problème en renommant $modal à $uibmodal y $modalInstance à $uibModalInstance

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X