Proveedor desconocido: $ modalProvider <- $ error modal con AngularJS

Respuestas:

197

Este tipo de error ocurre cuando escribe en una dependencia para un controlador, servicio, etc., y no ha creado ni incluido esa dependencia.

En este caso, $modalno es un servicio conocido. Parece que no pasó ui-bootstrap como una dependencia al arrancar angular. angular.module('myModule', ['ui.bootstrap']);Además, asegúrese de estar utilizando la última versión de ui-bootstrap (0.6.0), solo para estar seguro.

El error se produce en la versión 0.5.0, pero la actualización a 0.6.0 hace que el servicio $ modal esté disponible. Por lo tanto, actualice a la versión 0.6.0 y asegúrese de requerir ui.boostrap al registrar su módulo.

En respuesta a su comentario: así es como inyecta una dependencia de módulo.

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

});

Actualizar:

Se $modalha cambiado el nombre del servicio a $uibModal.

Ejemplo usando $ 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
fuente
1
He agregado ui.bootstrap y sigo recibiendo el mismo error. ¿Necesitamos agregar una directiva de correa? como se dice aquí stackoverflow.com/questions/18783974/…
Ranadheer Reddy
1
@Ranadheer Su enlace se refiere a la correa angular (esa es una biblioteca diferente). Como dije, está usando la versión anterior de ui-bootstrap o no agregó la dependencia. La otra respuesta también es relevante, que debe pasar el nombre al minificar, pero no parece que esté lidiando con la minificación en este momento.
m59
2
Hola @ m59. Eres un rito. Incluí una versión antigua de ui-bootstrap. Ahora incluí la nueva versión y está funcionando bien. Muchas gracias :-)
Ranadheer Reddy
59
El $ modal ahora debería leer $ uibModal. No estoy seguro en qué versión cambió, pero pasé mucho tiempo tratando de que $ modal funcionara antes de descubrir que ya no funciona ... Lo mismo para $ modalInstance, hazlo $ uibModalInstance
delp
7
Es una pena que lo cambien una y otra vez. Primero $ diálogo, luego $ modal, ahora $ uibModal. Solo enfermo. Gracias por actualizar la respuesta. Me ayudó.
Steven
54

5 años después (este no habría sido el problema en ese momento) :

El espacio de nombres ha cambiado; es posible que se encuentre con este mensaje después de actualizar a una versión más reciente de bootstrap-ui ; debe consultar $uibModal& $uibModalInstance.

Brent
fuente
Gracias. Usé el mismo código para 2 aplicaciones pero no funcionaba para la última. ¡Este cambio de nombre puede romper la aplicación de trabajo!
Tchaps
2
¡Gracias !, A partir de la versión 1.0.0 $ Modal y $ ModalInstance han quedado obsoletos, registro de cambios aquí
HaRoLD
$ modalInstance totalmente NO funcionó para mí. $ uibModalInstance hizo
CommandZ
22

Solo una nota adicional para un problema que también experimenté hoy: tuve un error similar "Proveedor desconocido: $ aProvider" cuando encendí la minificación / uglify de mi código fuente.

Como se menciona en el tutorial de Angular docs (párrafo: "Una nota sobre la minificación") , debe usar la sintaxis de la matriz para asegurarse de que las referencias se mantengan correctamente para la inyección de dependencia:

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

Para el ejemplo de Bootstrap de interfaz de usuario angular , menciona que debería reemplazar esto:

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

con esta notación de matriz:

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

Con ese cambio, mi código de ventana modal de interfaz de usuario angular minificado volvió a funcionar.

CREOFF
fuente
No creo que esté lidiando con la minificación en este momento, pero vale la pena señalar esto, ya que también podría causar el mismo problema.
m59
Eche un vistazo a github.com/btford/ngmin . Puede ejecutarlo antes de la minificación. Luego, puede seguir escribiendo la forma abreviada y depender de DI por los nombres de los argumentos, mientras que la minificación aún funciona ya que ngmin se expande a la versión de matriz.
Pascal
11

La respuesta obvia para el error del proveedor es la dependencia que falta al declarar un módulo, como en el caso de agregar ui-bootstrap. Lo único que muchos de nosotros no tenemos en cuenta son los cambios importantes al actualizar a una nueva versión. Sí, lo siguiente debería funcionar y no generar el error del proveedor:

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

Excepto cuando estemos usando una nueva versión de ui-boostrap. El proveedor modal ahora se define como:

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

El consejo aquí es que una vez que nos hayamos asegurado de que las dependencias estén incluidas y todavía recibamos este error, deberíamos verificar qué versión de la biblioteca JS estamos usando. También podríamos hacer una búsqueda rápida y ver si ese proveedor existe en el archivo.

En este caso, el proveedor modal debería ser ahora el siguiente:

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

Una nota más. Asegúrese de que su versión de ui-bootstrap sea compatible con su versión actual de angularjs. De lo contrario, puede obtener otros errores como templateProvider.

Para obtener información, consulte este enlace:

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

Espero eso ayude.

ozkary
fuente
Y ui bootstrap wiki contiene una lista de todos los cambios de prefijo.
bjauy
7

después de comprobar que había incluido todos dependencias, He arreglado el problema cambiando el nombre $modala $uibmodaly $modalInstancea$uibModalInstance

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