4

Uncaught Error: [$injector:unpr] Unknown provider: $animateProvider <- $animate

I am trying to create a carousel using Angular-ui as given in this link. http://angular-ui.github.io/bootstrap/

But, I get that error.

Details: I am using a .min angular script file. The index.html has the same code as given in the link. According to this post Error: Unknown provider: employeesProvider <- employees, I took the ng-controller from the html and I'm binding the controller in the controller.js as given in the angular-seed app.

Also, http://docs.angularjs.org/error/$injector:unpr?p0=$animateProvider%20%3C-%20$animate did not help me.

What could be the reason?

3

3 Answers 3

7

I was getting Unknown Provider issues as well when I introduced ngAnimate into a project with an older release of Angular. Your best bet is to use the version of ngAnimate equal to the current version of Angular in your project. They seem to be released in tandem.

0

This error can also occur due an automatic update to Batarang in Chrome. My site, which is using an older version of Angular suddenly started giving me this error (Unknown provider: $animateProvider <- $animate) and I had to disable Batarang to get it to work again.

0

I also came across the same issues like yours,and i resolved it by using version angular-1.4.3, here is the process for my resolutions. I am trying to run the directive "nginclude" from the network demo adress when i try to run the demo, the error pop up in the firefox console as you does,but when I change the version to 1.4.3 of angular,it all resolved. By the way,you can download the version from 1.4.3

.js
var APP = angular.module('app', ['ngAnimate'])
APP.controller('ctrl', ['$scope', function($scope) {
$scope.templates =
  [{name: 'template1.html',url:'template1.html'},
    {name: 'template2.html',url:'template2.html'}];
$scope.template = $scope.templates[0];}]);
.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta Content-Type="html/text;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/animation.css">
<title>ngInclude demo</title>
</head>
<body>
<div ng-controller="ctrl">
  <select ng-model="template" ng-options="t.name for t in templates">
     <option value="">(blank)</option>
  </select>
     url of the template: <code>{{template.url}}</code>
  <hr/>
  <div class="slide-animate-container">
  <div class="slide-animate" ng-include="template.url"></div>
 </div>
 </div>
 </body>
<script src="js/angular.js"></script>
<script src="js/ngInclude.js"></script>
<script src="js/angular-animate.js"></script>
</html>

Thank you.

2
  • You should add relevant code to your answer instead of just linking to external links
    – singe3
    Commented Jul 17, 2015 at 7:47
  • Hi singe3, Thank you for your reminding,I am a new comer here myself. Commented Jul 17, 2015 at 7:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.