未捕获错误：[$ injector：unpr]未知提供者：$ animateProvider

Question

这应该是一个简单的问题，eveything工作正常。突然，我被这个错误卡住了，我试图通过跟随角网站来修复它。它不会帮助我。这里是我的代码，

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script> 
<script type="text/javascript" src="script/d3.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 

App.Js：

var routerApp = angular.module('DuoDiginRt', ['ui.bootstrap', 'ui.router']); 
routerApp.config(function($stateProvider, $urlRouterProvider) { 
$urlRouterProvider.otherwise('/dashboard'); 
$stateProvider   
      .state('dashboard', { 
        url: '/dashboard', 
        templateUrl: 'Charts.html', 
        controller: 'DashboardCtrl' 
       }) 
     }); 
routerApp.controller('DashboardCtrl', ['$scope', '$timeout', 
function($scope, $timeout) { 
       $scope.gridsterOptions = { 
        margins: [20, 20], 
        columns: 4, 
        draggable: { 
         handle: 'h3' 
        } 
       }; 
    $scope.dashboards = { 
       '1': { 
         id: '1', 
       icon: 'images/icons/chart_line.png', 
         name: 'Home', 
         widgets: [ 
         { 
          col: 0, 
          row: 0, 
          sizeY: 1, 
          sizeX: 1, 
          icon: 'images/icons/chart_line.png', 
          name: "Stocks per store" 
         } 
         ] 
       } 
       }; 
       $scope.clear = function() { 
        $scope.dashboard.widgets = []; 
       }; 

       $scope.addWidget = function() { 
        $scope.dashboard.widgets.push({ 
         name: "New Chart", 
         sizeX: 1, 
         sizeY: 1 
        }); 
       }; 

       $scope.remove = function(widget) { 
        $scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1); 
       }; 

       $scope.openSettings = function(widget) { 
        $modal.open({ 
         scope: $scope, 
         templateUrl: 'chart_settings.html', 
         controller: 'chartSettingsCtrl', 
         resolve: { 
          widget: function() { 
           return widget; 
          } 
         } 
        }); 
       }; 
      $scope.ZoomIn = function() { 
       var ZoomInValue = parseInt(document.getElementById("container").style.zoom) + 10 + '%' 
       document.getElementById("container").style.zoom = ZoomInValue; 
       return false; 
      } 

      $scope.ZoomOut = function() { 
       var ZoomOutValue = parseInt(document.getElementById("container").style.zoom) - 10 + '%' 
       document.getElementById("container").style.zoom = ZoomOutValue; 
       return false; 
      } 

      $scope.Zoomorg = function() { 
       var ZoomOutValue = parseInt(100) + '%' 
       document.getElementById("container").style.zoom = ZoomOutValue; 
       return false; 
      } 

      $scope.openBox = function(){ 
       $("#toolboxControl").css("left","0px"); 
       $("#openbox").css("display","none"); 
       $("#closebox").css("display","block"); 
      } 

      $scope.closeBox = function(){ 
       $("#toolboxControl").css("left","-250px"); 
       $("#closebox").css("display","none"); 
       $("#openbox").css("display","block"); 
      } 

      $scope.vopenBox = function(){ 
       $("#variablepanel").css("right","0px"); 
       $("#vopenbox").css("display","none"); 
       $("#vclosebox").css("display","block"); 
      } 

      $scope.vcloseBox = function(){ 
       $("#variablepanel").css("right","-250px"); 
       $("#vclosebox").css("display","none"); 
       $("#vopenbox").css("display","block"); 
      } 

       $scope.$watch('selectedDashboardId', function(newVal, oldVal) { 
        if (newVal !== oldVal) { 
         $scope.dashboard = $scope.dashboards[newVal]; 
        } else { 
         $scope.dashboard = $scope.dashboards[1]; 
        } 
       }); 

       // init dashboard 
       $scope.selectedDashboardId = '1'; 

      } 
      ]) 

HTML：

<body ng-controller="DashboardCtrl"> 
      <div id="main_wrapper">   
       <div id="toolboxControl"> 
        <div id="toolbaropener"> 
         <div id="openbox" ng-click="openBox()">></div> 
         <div id="closebox" ng-click="closeBox()"><</div> 
        </div> 
        <div id="containerChart"> 
         <ul> 
          <li> 
          <a ng-click="addWidget()" href="#controlflow">Charts</a> 
          <div id="controlflow" class="containerChart"> 
          <input ng-model="searchCommonValue" class="form-control" type="search" placeholder="Search controls..."> 
          <div plumb-menu-item ng-repeat="widget in dashboard.widgets | filter : searchCommonValue" class="menu-item" data-identifier="{{widget.id}}" data-title="{{widget.name}}" draggable> 
           <img class="toolheader" src="{{widget.Icon}}"> 
           <div class="toolcontent">{{widget.name}}</div> 
          </div> 
          </div> 
         </li> 

         </ul> 
        </div> 
       </div> 
       <div id="container" class="drop-container" ng-click="addEvent($event)" droppable> 
        <div plumb-item class="item" style="margin: 20px; top: 60px; left: 200px; height: 300px; width: 500px;" ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }" 
         data-identifier="{{widget.id}}"> 
         <div class="box" ng-controller="CustomWidgetCtrl"> 
        <div class="box-header"> 
         <h3>{{ widget.name }}</h3> 
         <div class="box-header-btns pull-right"> 
          <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a> 
          <a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a> 
         </div> 
        </div> 
        <div class="box-content"> 
         <!-- <bars data="40,4,55,15,16,33,52,20"></bars> --> 
         <!-- <bargraph id="d3bar" datajson="sample.json" 
         xaxis-name = "Year" 
         xaxis-pos = "905" 
         yaxis-name = "Frequency" 
         yaxis-pos = "12" 
         d3-format= ".0%"> --> 
         </div> 
        </div> 
       </div> 
       </div> 
         </div> 
        </div> 
       </div> 
       <div post-render></div> 
       <span ng-init="init()"></span> 
     </div> 

Answer 1

我见过未知提供者问题以及当我将ngAnimate引入具有旧版本Angular的项目时。您最好的选择是使用等于当前版本的Angular的版本ngAnimate。

他们似乎在同一时间发布。

查看Angular的版本（位于JS文件的顶部）并确定它何时发布并找到与ngAnimate匹配的版本。

Barang在旧版本的Chrome（也可能是Firefox）中可能导致此问题。禁用，如果使用。

UPDATE：

在看代码，有角被装载的两个版本;版本1.0.6和1.2.15。您只能加载一个版本。