Unbekannter Anbieter: $ modalProvider <- $ modaler Fehler mit AngularJS

Antworten:

197

Diese Art von Fehler tritt auf, wenn Sie eine Abhängigkeit für einen Controller, einen Dienst usw. schreiben und diese Abhängigkeit nicht erstellt oder eingeschlossen haben.

In diesem Fall $modalist kein Dienst bekannt. Es hört sich so an, als hätten Sie UI-Bootstrap nicht als Abhängigkeit beim Bootstrapping-Winkel übergeben. angular.module('myModule', ['ui.bootstrap']);Stellen Sie außerdem sicher, dass Sie die neueste Version von ui-bootstrap (0.6.0) verwenden, um die Sicherheit zu gewährleisten.

Der Fehler wird in Version 0.5.0 ausgelöst, aber durch die Aktualisierung auf 0.6.0 wird der Dienst $ modal verfügbar. Aktualisieren Sie also auf Version 0.6.0 und stellen Sie sicher, dass Sie bei der Registrierung Ihres Moduls ui.boostrap benötigen.

Antwort auf Ihren Kommentar: So fügen Sie eine Modulabhängigkeit ein.

<!-- 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) {

});

Aktualisieren:

Der $modalDienst wurde in umbenannt $uibModal.

Beispiel mit $ 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
quelle
1
Ich habe ui.bootstrap hinzugefügt und erhalte immer noch den gleichen Fehler? Müssen wir eine Strap-Direktive hinzufügen? wie hier gesagt stackoverflow.com/questions/18783974/…
Ranadheer Reddy
1
@Ranadheer Ihr Link bezieht sich auf Winkelgurt (das ist eine andere Bibliothek). Wie gesagt, Sie verwenden entweder die ältere Version von ui-bootstrap oder Sie haben die Abhängigkeit nicht hinzugefügt. Die andere Antwort ist ebenfalls relevant, dass Sie beim Minimieren den Namen übergeben müssen, aber es hört sich nicht so an, als würden Sie sich im Moment mit Minimierung befassen.
m59
2
Hi @ m59. Du bist ein Ritus. Ich habe eine alte Version von UI-Bootstrap aufgenommen. Jetzt habe ich die neue Version aufgenommen und sie funktioniert einwandfrei. Vielen Dank :-)
Ranadheer Reddy
59
Das $ modal sollte jetzt $ uibModal lesen. Ich bin mir nicht sicher, in welcher Version es sich geändert hat, aber ich habe viel zu lange versucht, $ modal zum Laufen zu bringen, bevor ich herausgefunden habe, dass es nicht mehr funktioniert ... Gleiches gilt für $ modalInstance, machen Sie es $ uibModalInstance
delp
7
Es ist eine Schande, dass sie es immer wieder ändern. Erst $ dialog, dann $ modal, jetzt $ uibModal. Nur krank. Vielen Dank für die Aktualisierung der Antwort. Half mir.
Steven
54

5 Jahre später (dies wäre damals nicht das Problem gewesen) :

Der Namespace hat sich geändert. Möglicherweise stoßen Sie nach dem Upgrade auf eine neuere Version von bootstrap-ui auf diese Meldung . Sie müssen sich auf $uibModal& beziehen $uibModalInstance.

Brent
quelle
Vielen Dank. Ich habe den gleichen Code für 2 Anwendungen verwendet, aber für die letzte funktionierte er nicht. Diese Namensänderung kann die funktionierende Anwendung beschädigen !!!
Tchaps
2
Danke!, Ab Version 1.0.0 sind $ Modal und $ ModalInstance veraltet, Changelog hier
HaRoLD
$ modalInstance hat bei mir NICHT funktioniert. $ uibModalInstance hat
CommandZ
22

Nur eine zusätzliche Randnotiz für ein Problem, das ich heute auch hatte: Ich hatte einen ähnlichen Fehler "Unbekannter Anbieter: $ aProvider", als ich die Minimierung / Uglifizierung meines Quellcodes aktivierte .

Wie im Tutorial zu Angular-Dokumenten (Absatz: "Ein Hinweis zur Minimierung") erwähnt , müssen Sie die Array-Syntax verwenden, um sicherzustellen, dass die Referenzen für die Abhängigkeitsinjektion korrekt aufbewahrt werden:

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

Für das Angular UI Bootstrap-Beispiel, das Sie erwähnen, sollten Sie dies ersetzen:

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

mit dieser Array-Notation:

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

Mit dieser Änderung war mein minimierter modaler Angular UI-Fenstercode wieder funktionsfähig.

CREOFF
quelle
Ich glaube nicht, dass er sich gerade mit Minifizierung befasst, aber das ist erwähnenswert, da es auch das gleiche Problem verursachen könnte.
m59
Werfen Sie einen Blick auf github.com/btford/ngmin. Sie können es vor der Minifizierung ausführen. Sie können dann die Kurzform weiter schreiben und sich durch Argumentnamen auf DI verlassen, während die Minimierung weiterhin funktioniert, da ngmin auf die Array-Version erweitert wird.
Pascal
11

Die offensichtliche Antwort auf den Providerfehler ist die fehlende Abhängigkeit beim Deklarieren eines Moduls wie beim Hinzufügen von UI-Bootstrap. Das einzige, was viele von uns nicht berücksichtigen, sind die grundlegenden Änderungen beim Upgrade auf eine neue Version. Ja, Folgendes sollte funktionieren und den Anbieterfehler nicht auslösen:

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

Außer wenn wir eine neue Version von ui-boostrap verwenden. Der modale Anbieter ist jetzt definiert als:

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

Der Ratschlag hier lautet: Sobald wir sichergestellt haben, dass die Abhängigkeiten enthalten sind und dieser Fehler weiterhin auftritt, sollten wir überprüfen, welche Version der JS-Bibliothek wir verwenden. Wir könnten auch eine schnelle Suche durchführen und feststellen, ob dieser Anbieter in der Datei vorhanden ist.

In diesem Fall sollte der modale Anbieter nun wie folgt lauten:

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

Noch eine Anmerkung. Stellen Sie sicher, dass Ihre UI-Bootstrap-Version Ihre aktuelle AngularJS-Version unterstützt. Wenn nicht, erhalten Sie möglicherweise andere Fehler wie templateProvider.

Weitere Informationen finden Sie unter folgendem Link:

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

ich hoffe es hilft.

Ozkary
quelle
Das UI-Bootstrap-Wiki enthält eine Liste aller Präfixänderungen.
Bjauy
7

Nachdem ich überprüft hatte, ob alle Abhängigkeiten enthalten waren, habe ich das Problem durch Umbenennen $modalin $uibmodalund $modalInstanceauf behoben$uibModalInstance

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