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
For latest changes, visit: https://github.com/angular-ui/bootstrap
|
Hope it helps
0 comments :
Post a Comment
What do you think?