Ошибка неактивности: [$ 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. Лучше всего использовать версию ngAnimate, равную текущей версии Angular в вашем проекте.

Кажется, что они выпущены в одно и то же время.

Посмотрите версию Angular (вверху файла JS) и определите, когда она была выпущена, и найдите соответствующий выпуск для ngAnimate.

Возможно также, что Barang может вызвать эту проблему в Chrome (и, возможно, Firefox) со старыми версиями. Отключить, если использовать.

ОБНОВЛЕНИЯ:

После глядя на коде, есть две версий Углового быть загружены; версии 1.0.6 и 1.2.15. Вы можете загружать только одну версию.