由于以下原因无法实例化模块 ngAnimate：

Question

我在构建 Angular JS 项目时遇到问题。

它说 实例化模块 ngAnimate 失败，原因是：

我已将所有服务放入 []，但 ngAnimate 无法正常工作。

这是应用程序

未能实例化模块 ngAnimate，原因是：'use strict'；

/* global app:true */

var app = angular
    .module('angNewsApp', [
        'ngCookies',
        'ngResource',
        'ngSanitize',
        'ngRoute',
        'ngAnimate',
        'firebase'
    ])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/posts.html',
                controller: 'PostsCtrl'
            })
            .when('/posts/:postId', {
                templateUrl: 'views/showpost.html',
                controller: 'ViewPostCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    }])

.constant('FIREBASE_URL', 'https://scorching-fire-4068.firebaseio.com/');

app.directive('post', function() {
  var controller = function($scope) {
    $scope.showAnswer = false;
  };

  return {
    restrict: 'C',
    scope: false,
    controller: controller
  };
});

app.animation('.answer-animation', function(){

  CSSPlugin.defaultTransformPerspective = 1000;

  TweenMax.set($("div.back"), {rotationX:-180});

  $.each($("div.box"), function(i,element)
  {
    console.log(element);
    var frontCard = $(this).children("div.front")
    var backCard = $(this).children("div.back")
    var tl = new TimelineMax({paused:true})

    tl
      .to(frontCard, 1, {rotationX:180})
      .to(backCard, 1, {rotationX:0},0)

    this.animation = tl;
  });

  return {
    beforeAddClass: function(element, className, done){
      if (className == 'answer') {
        var el = element.find('.box')[0];
        el.animation.play();
      }
      else {
        done();
      }
    },

    beforeRemoveClass: function(element, className, done) {
      if (className == 'answer') {
        var el = element.find('.box')[0];
        el.animation.reverse();
      }
      else {
        done();
      }
    }
  };
});

还有 index.html 脚本标签

 <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/firebase/firebase.js"></script>
    <script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
    <script src="bower_components/angularfire/angularfire.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.js"></script>
        <script src="scripts/app.js"></script>
        <script src='scripts/services/posts.js'></script>
        <script src="scripts/filters/url.js"></script>
        <script src="scripts/controllers/posts.js"></script>
        <script src="scripts/controllers/postview.js"></script>
        <script src="scripts/controllers/nav.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script>

        <!-- endbuild -->

Answer 1

好的，这就是答案，

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script>

都是外部库加载，这意味着它们无法通过缩小过程。

我通过 bower 安装库解决了这个问题，然后像这样添加它们。

<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/greensock/src/minified/TweenMax.min.js"></script> 

Answer 2

只是添加这个以防它对其他人有帮助！

我遇到了同样的问题，但我的原因是我在 angular-animate 的脚本标签中的 src 不正确 - 我粘贴了 bower_components/angular/angular-animate.js 不是正确的参考：

<script src="bower_components/angular-animate/angular-animate.js"></script>