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/bootstrap/#/modal here.

score 201 · Accepted Answer · edited Jan 18 '17 at 20:59

201

This kind of error occurs when you write in a dependency for a controller, service, etc, and you haven't created or included that dependency.

In this case, $modal isn't a known service. It sounds like you didn't pass in ui-bootstrap as a dependency when bootstrapping angular. angular.module('myModule', ['ui.bootstrap']); Also, be sure you are using the latest version of ui-bootstrap (0.6.0), just to be safe.

The error is thrown in version 0.5.0, but updating to 0.6.0 does make the $modal service available. So, update to version 0.6.0 and be sure to require ui.boostrap when registering your module.

Replying to your comment: This is how you inject a module dependency.

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

});

Update:

The $modal service has been renamed to $uibModal.

Example using $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
});

edited Jan 18 '17 at 20:59

answered Sep 11 '13 at 06:11

m59

43,214
14
119
136

1

I have added ui.bootstrap and still getting the same error? do we need to add strap directive? as said here http://stackoverflow.com/questions/18783974/referenceerror-modal-is-not-defined-when-trying-to-add-an-angularjs-modal-wind – Ranadheer Reddy Sep 25 '13 at 06:23
1

@Ranadheer Your link is regarding angular-strap (that's a different library). As I said, you're either using the older version of ui-bootstrap or you didn't add the dependency. The other answer is also relevant, that you need to pass the name when minifying, but it doesn't sound like you're dealing with minification at the moment. – m59 Sep 25 '13 at 15:22
2

Hi @m59. You are rite. I included old version of ui-bootstrap. Now i included the new version and it's working fine. Thank you very much :-) – Ranadheer Reddy Sep 26 '13 at 14:07
61

The $modal should now read $uibModal. Not sure in which version it changed, but I spent far to long trying to get $modal to work before finding out it no longer works... Same for $modalInstance, make it $uibModalInstance – delp Jan 27 '16 at 15:29
7

Its a shame they change it over and over again. First $dialog, then $modal, now $uibModal. Just sick. Thanks for updating the answer. Helped me. – Steven Aug 28 '16 at 16:08
1

Ridiculous, guides for other stuff reference it as $modal, luckily google found this post. – RandomUs1r Apr 11 '17 at 21:27
@delp thank you for posting about the change to `$uibModalInstance` upvoted both of you. Unbelievable that to this day the official guide still references $modal :facepalm: – Aspiring Dev Jun 13 '21 at 21:22

score 56 · Answer 2 · edited Nov 16 '17 at 14:05

56

5 years later (this would not have been the problem at the time):

The namespacing has changed - you may stumble across this message after upgrading to a newer version of bootstrap-ui; you need to refer to $uibModal & $uibModalInstance.

edited Nov 16 '17 at 14:05

bruntime

371
2
13

answered Jan 21 '16 at 09:48

Brent

4,611
4
38
55

Thanks. I used the same code for 2 applications but it wasn't working for the last one. This naming change can break working application !!! – Tchaps Feb 03 '16 at 07:42
3

Thanks!, As of version 1.0.0 $Modal and $ModalInstance have been deprecated, changelog [here](https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md#breaking-changes-4) – HaRoLD May 06 '16 at 10:48
$modalInstance totally did NOT work for me. $uibModalInstance did – CommandZ Sep 22 '16 at 18:29

CREOFF · Answer 3 · 2013-09-18T11:29:28.937

Just an extra side note for an issue I also experienced today: I had a similar error "Unknown provider: $aProvider" when I turned on minification/uglify of my source code.

As mentioned in the Angular docs tutorial (paragraph: "A Note on Minification") you have to use the array syntax to make sure references are kept correctly for dependency injection:

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

For the Angular UI Bootstrap example you mention you should this replace this:

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

with this array notation:

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

With that change my minified Angular UI modal window code was functional again.

I don't think he's dealing with minification right now, but this is worth noting as it also could cause the same issue. — m59, Sep 25 '13 at 15:22
Have a look into https://github.com/btford/ngmin You can run it prior to the minification. You can then keep on writing the shortform and depend on DI by argument names while minification still works as ngmin does expand to the array version. — Pascal, Mar 19 '14 at 14:29

score 11 · Answer 4 · answered Jan 22 '16 at 16:17

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.

And [ui bootstrap wiki](https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes) contains list of all prefix changes. — bjauy, Apr 08 '16 at 06:54

Yogi · Answer 5 · 2016-09-06T07:58:51.450

8

after checking that I had all dependancies included, I fixed the issue by renaming $modal to $uibmodal and $modalInstance to $uibModalInstance

edited Sep 06 '16 at 07:58

answered Sep 04 '16 at 14:38

Yogi

368
3
7

score 0 · Answer 6 · edited Jul 30 '15 at 16:35

0

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

edited Jul 30 '15 at 16:35

Yasel

2,920
4
40
48

answered Jul 30 '15 at 16:06

Walter Rivera

1

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

6 Answers6

Update:

Linked