1/16/16

AngularJS Unknown provider: $modalProvider


Unknown provider: $modalProvider <- $modal 


The obvious answer for the unknown provider error is either the missing dependency when declaring a module as in the case of adding ui-bootstrap or just the incorrect name. After we make sure that the provider name and dependency is included, we may still get the error. We start to think that we had done this exactly the same way in a previous project, and it works OK.  The one thing we need to account for is the breaking changes when upgrading to a new release of the js libraries

 Let’s take a look at how we use the $modal provider in one of our modules:


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

Yes, the code above should work and not raise the provider error, but when we start a new project, this error shows up. Why?

To figure this out, we should take a look at our current versions of ui-bootstrap and see if this provider still exists. Yes, we see that 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
            },


OK, so during one of the new releases, the provider was renamed. The advice here is that when we start a new project, we should take inventory on the versions of the js libraries and their dependencies. This is especially true when we have created core components for re-usability which may no longer work when upgrading to a new version.

In this case, the modal provider for the latest release of ui-boostrap should be as follows:


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


One more note, we also need to make sure that the version of ui-bootstrap we are using supports our version of angularjs. If this is not the case, we may get other errors like unknown  $templateProvider which is common when using a recent ui-bootstrap version with an older angularjs version.

As of the time of this writing, the current requirements are as follows:

Angular Requirements
  • UI Bootstrap 1.0 and higher requires Angular 1.4.x or higher and it has been tested with Angular 1.4.8.
  • UI Bootstrap 0.14.3 is the last version that supports Angular 1.3.x.
  • UI Bootstrap 0.12.0 is the last version that supports Angular 1.2.x.
For latest changes, visit:  https://github.com/angular-ui/bootstrap



Hope it helps