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

Réponses:

197

Ce type d'erreur se produit lorsque vous écrivez dans 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, $modaln'est pas un service connu. Il semble que vous n'ayez pas passé ui-bootstrap en tant que dépendance lors de l'amorçage angulaire. angular.module('myModule', ['ui.bootstrap']);Assurez-vous également que vous utilisez la dernière version de ui-bootstrap (0.6.0), juste pour être sûr.

L'erreur est générée dans la version 0.5.0, mais la mise à jour vers 0.6.0 rend le service $ modal disponible. Donc, mettez à jour vers la version 0.6.0 et assurez-vous d'exiger ui.boostrap lors de l'enregistrement de votre module.

En réponse à votre commentaire: Voici comment vous injectez 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) {

});

Mettre à jour:

Le $modalservice a été renommé en $uibModal.

Exemple utilisant $ 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
});
m59
la source
1
J'ai ajouté ui.bootstrap et j'obtiens toujours la même erreur? devons-nous ajouter une directive de sangle? comme dit ici stackoverflow.com/questions/18783974/…
Ranadheer Reddy
1
@Ranadheer Votre lien concerne angular-strap (c'est une autre bibliothèque). Comme je l'ai dit, soit vous utilisez l'ancienne version de ui-bootstrap, soit vous n'avez pas ajouté la dépendance. L'autre réponse est également pertinente, que vous devez passer le nom lors de la minification, mais il ne semble pas que vous ayez affaire à la minification pour le moment.
m59
2
Salut @ m59. Vous êtes un rite. J'ai inclus l'ancienne version de ui-bootstrap. Maintenant, j'ai inclus la nouvelle version et cela fonctionne bien. Merci beaucoup :-)
Ranadheer Reddy
59
Le $ modal devrait maintenant lire $ uibModal. Je ne sais pas dans quelle version il a changé, mais j'ai passé beaucoup trop de temps à essayer de faire fonctionner $ modal avant de découvrir que cela ne fonctionne plus ... Idem pour $ modalInstance, faites-le $ uibModalInstance
delp
7
C'est dommage qu'ils le changent encore et encore. D'abord $ dialog, puis $ modal, maintenant $ uibModal. Juste malade. Merci d'avoir mis à jour la réponse. M'a aidé.
Steven
54

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 la mise à niveau vers une version plus récente de bootstrap-ui ; vous devez vous référer à $uibModal& $uibModalInstance.

Brent
la source
Merci. J'ai utilisé le même code pour 2 applications mais cela ne fonctionnait pas pour la dernière. Ce changement de nom peut interrompre l'application de travail !!!
Tchaps
2
Merci !, Depuis la version 1.0.0, $ Modal et $ ModalInstance sont obsolètes, changelog ici
HaRoLD
$ modalInstance n'a pas du tout fonctionné pour moi. $ uibModalInstance did
CommandZ
22

Juste une note supplémentaire pour un problème que j'ai également rencontré aujourd'hui: j'ai eu une erreur similaire "Fournisseur inconnu: $ aProvider" lorsque j'ai activé la minification / uglify de mon code source.

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

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

Pour l' exemple Angular UI Bootstrap, vous mentionnez que vous devez remplacer ceci:

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 */ 
}];

Avec ce changement, mon code de fenêtre modale de l'interface utilisateur angulaire minifiée était à nouveau fonctionnel.

CREOFF
la source
Je ne pense pas qu'il s'occupe de la minification pour le moment, mais cela vaut la peine de le noter car cela pourrait également causer le même problème.
m59
Jetez un œil à github.com/btford/ngmin Vous pouvez l'exécuter avant la minification. Vous pouvez ensuite continuer à écrire le formulaire abrégé et dépendre de DI par les noms d'argument tandis que la minification fonctionne toujours lorsque ngmin se développe vers la version du tableau.
Pascal
11

La réponse évidente à 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 dont beaucoup d'entre nous ne tiennent pas compte, ce sont les changements majeurs lors de la mise à niveau vers une nouvelle version. Oui, les éléments suivants devraient fonctionner et ne pas déclencher l'erreur de fournisseur:

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

Sauf lorsque nous utilisons 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 devrions vérifier la version de la bibliothèque JS que nous utilisons. Nous pourrions également faire une recherche rapide et voir si ce fournisseur existe dans le fichier.

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

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

Encore une note. Assurez-vous que votre version ui-bootstrap prend en charge votre version angularjs actuelle. 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 ça aide.

Ozkary
la source
Et wiki bootstrap de l'interface utilisateur contient la liste de tous les changements de préfixe.
bjauy
7

après avoir vérifié que j'avais tout compris dépendances, je fixe la question en renommant $modalà $uibmodalet $modalInstanceà$uibModalInstance

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