Объект ngAnimate не установлен на функцию

Question

У меня возникает ошибка при использовании ngAnimate и ui-view. Onload или щелкнуть любое меню навигации; angular-animate.js генерирует ошибку «объект не является функцией».

Здесь главное javacsript приложение:

(function() { 
'use strict'; 
var app = angular.module("pie", ['ui.router', 'uiGmapgoogle-maps', 'ui.bootstrap', 'ngAnimate']); 

app.config(["$stateProvider", "$locationProvider", "$urlRouterProvider", 
function ($stateProvider, $locationProvider, $urlRouterProvider) { 

    $locationProvider.html5Mode({ enabled: true, requireBase: false }); 

    $urlRouterProvider.otherwise('/Welcome'); 
    $stateProvider 
     .state("Welcome", { 
      url: "/Welcome", 
      templateUrl: "../Scripts/Home/WelcomeView.html", 
      controller: "WelcomeController" 
     }) 
     .state("About", { 
      url: "/About", 
      templateUrl: "../Scripts/Home/AboutView.html", 
      controller: "AboutController" 
     }) 
     .state("Contact", { 
      url: "/Contact", 
      templateUrl: "../Scripts/Home/ContactView.html", 
      controller: "ContactController" 
     }) 
     .state("Login", { 
      url: "/Account/Login" 
     }) 
     .state("Register", { 
      url: "/Account/Register" 
     }) 
     .state("ForgotPassword", { 
      url: "/Account/ForgotPassword" 
     }); 
}]); 

//app.animation('.view-animation', function() { 
// return { 
//  enter: function (element, done) { 
//   element.css({ 
//    opacity: 0.5, 
//    position: "relative", 
//    top: "10px", 
//    left: "20px" 
//   }).animate({ 
//    top: 0, 
//    left: 0, 
//    opacity: 1 
//   }, 1000, done); 
//  } 
// }; 
//}); 

app.config(['$httpProvider', function ($httpProvider) { 
    //Http Intercpetor to check auth failures for xhr requests 
    $httpProvider.interceptors.push('AuthHttpResponseInterceptor'); 
}]); 

// Google map 
app.config(['uiGmapGoogleMapApiProvider', function (uiGmapGoogleMapApiProvider) { 
    uiGmapGoogleMapApiProvider.configure({ 
     // key: 'your api key', 
     v: '3.17', 
     libraries: 'weather,geometry,visualization' 
    }); 
} 
]); 

}()); 

Удивительно анимация, кажется, работает, но я бы предпочел решить ошибку:

Это где ошибка генерируется в угловом anumate.js :

function fireDoneCallbackAsync() { 
              fireDOMCallback('close'); 
              if (doneCallback) { 
               $$asyncCallback(function() { 
                doneCallback(); 
               }); 
              } 
             } 

Я использую vs2013, как IDE, все JavaScripts файлы и библиотеки вставлены в нижней части страницы; Я попытался инъекционным через пачку или очередной сценарий, как шоу, но без каких-либо различий:

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@Scripts.Render("~/bundles/angularjs") 
@*@Scripts.Render("~/bundles/angularAnimate")*@ 
<script src="~/Scripts/angular-animate.js"></script> 
@Scripts.Render("~/bundle/app") 

Любой помощь будет оценен. Спасибо

EDITED Даже если я прокомментирую вызов app.animation, ошибка остается (см. Код выше). Просто подающее ngAnimate будет генерировать ошибку

var app = angular.module("pie", ['ui.router', 'uiGmapgoogle-maps', 'ui.bootstrap', 'ngAnimate']); 

Может ли IIFE быть причиной?

Answer 1

Что-то действительно важно помнить при использовании ngAnimate в том, что версия ngAnimate должна быть такой же, как у угловой версии, которую вы используете.

То есть, если вы используете v 1.3.4 углового значения, вы должны использовать v 1.3.4 углового анимата.

Так как вставка только библиотеки дает вам ошибку, я ожидаю, что ваши версии не синхронизируются.