Unknown provider: $modalProvider <- $modal error with AngularJS

Question

I keep receiving this error as I\'m trying to implement bootstrap Modal window. What could be the cause of it? I\'ve copy/pasted everything from http://angular-ui.github.io/

Answer 1

The obvious answer for the provider error is the missing dependency when declaring a module as in the case of adding ui-bootstrap. The one thing many of us do not account for is the breaking changes when upgrading to a new release. Yes, the following should work and not raise the provider error:

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

Except when we are using a new version of ui-boostrap. The modal provider now is defined as:

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

The advise here is once we have make sure that the dependencies are included and we still get this error, we should check what version of the JS library we are using. We could also do a quick search and see if that provider exists in the file.

In this case, the modal provider should now be as follows:

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

One more note. Make sure that your ui-bootstrap version supports your current angularjs version. If not, you may get other errors like templateProvider.

For information check this link:

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

hope it helps.