Angular UI Bootstrap - Carousel指令 - Animate CSS Provider未知

Question

我试图使用carousel指令，并且遇到两个错误。

第一个错误：

Unknown provider: $animateCssProvider <- $animateCss <- .item-animation

第二个错误：

TypeError: $animate.on is not a function

的package.json：

"bootstrap": "*",
"angular": ">=1.4.0",
"grunt-angular-templates": "1.0.4",
"angular-animate": "1.4.0",
"angular-translate": "^2.7.0",
"angular-ui-bootstrap": "^1.2.4",
"checklist-model": "*",
"numeral": "*",
"angular-numeraljs": "^1.0"

控制器：

var estateCarouselController = presentation.controller('estateCarouselController',['$scope',function($scope){
$scope.myInterval = 3000;
$scope.noWrapSlides = false;
$scope.active = 0;
$scope.slides = [
    {
        image: 'http://lorempixel.com/400/200/'
    },
    {
        image: 'http://lorempixel.com/400/200/food'
    },
    {
        image: 'http://lorempixel.com/400/200/sports'
    },
    {
        image: 'http://lorempixel.com/400/200/people'
    }
];
}

标记：

<uib-carousel active="0" interval="myInterval">
        <uib-slide ng-repeat="slide in slides" index="$index">
            <img ng-src="{[{slide.image}]}" style="margin:auto;" />
            <div class="carousel-caption">
                <h4>Slide {[{$index+1}]}</h4>
            </div>
        </uib-slide>
    </uib-carousel>

注意：分隔符是为了避免与Twig发生冲突。

编辑：模块声明。

var presentation = angular.module('presentation', ['ngNumeraljs','apiModule',"checklist-model",'ngAnimate',"ui.bootstrap"]);