Question

我正在尝试在我的有角项目中注入ngAnimate，但是遇到错误“模块'ngAnimate'不可用！您拼写了模块名称或忘记了加载它。如果注册模块，请确保将依赖项指定为第二个参数。”

这就是我所做的：

1）通过运行“ npm install angular-animate --save”来安装依赖项

package.json

    {
"name": "roles",
  "version": "0.0.3",
  "description": "Role management system",
  "main": "index.js",
  "kibana": {
    "version": "kibana"
  },
  "scripts": {
    "lint": "eslint",
    "start": "plugin-helpers start",
    "test:server": "plugin-helpers test:server",
    "test:browser": "plugin-helpers test:browser",
    "build": "plugin-helpers build",
    "postinstall": "plugin-helpers postinstall"
  },
  "devDependencies": {
    "@elastic/eslint-config-kibana": "0.0.2",
    "@elastic/plugin-helpers": "^6.0.0",
    "babel-eslint": "4.1.8",
    "chai": "^3.5.0",
    "eslint": "1.10.3",
    "eslint-plugin-mocha": "1.1.0"
  },
  "dependencies": {
    "angular": "^1.4.7",
    "angular-animate": "^1.7.6",
    "angular-aria": "^1.4.14",
    "angular-material": "^1.1.12",
    "angular-messages": "^1.4.14"
  }
}

2） app.js

import moment from 'moment';
import chrome from 'ui/chrome';
import { uiModules } from 'ui/modules';
import uiRoutes from 'ui/routes';
import 'ui/autoload/styles';
import './less/main.less';
import template from './templates/index.html';

uiRoutes.enable();
uiRoutes
.when('/', {
  template,
  resolve: {
    currentTime($http) {
      return $http.get('../api/roles/example').then(function (resp) {
        return resp.data.time;
      });
    }
  }
});

uiModules
.get('app/roles', ['ngAnimate',
'ngAria',
'ngMessages',
'ngMaterial'])
.controller('rolesHelloWorld', function ($scope, $route, $interval,$mdThemingProvider) {
  $mdThemingProvider.theme('red')
      .primaryPalette('red');
console.log(ngmaterial);
    $mdThemingProvider.theme('blue')
      .primaryPalette('blue');



      $scope.theme = 'red';

      var isThemeRed = true;

app.js

3） index.html

<!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<div class="container" ng-controller="rolesHelloWorld">
  <div class="row">
    <div class="col-12-sm">
      <div class="well">
        <h2>Congratulations</h2>
        <p class="lead">You've successfully created your first Kibana Plugin!</p>
      </div>
      <h1>{{ title }}</h1>
      <p class="lead">{{ description }}</p>
      <p>The current time is {{ currentTime }}</p>
    </div>
  </div>



<div ng-controller="AppCtrl" ng-cloak md-theme="{{theme}}" class="container">
  <p class="inset">
    We have an interval that changes the color of the button from <code>red</code> to <code>blue</code> themes,
    Open the dialog to see the theme being inherited to the dialog and any component inside
  </p>
  <md-button class="md-primary md-raised" ng-click="showAdvanced($event)">Open Dialog</md-button>
</div>
</div>

4）错误

Error: [$injector:modulerr] Failed to instantiate module kibana due to: [$injector:modulerr] Failed to instantiate module app/roles due to: [$injector:modulerr] Failed to instantiate module ngAnimate due to: [$injector:nomod] Module 'ngAnimate' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.4.7/$injector/nomod?p0=ngAnimate minErr/<@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:759 setupModuleLoader/</</<@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:16521 ensure@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:15527 setupModuleLoader/</<@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:16040 loadModules/<@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:31840 forEach@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:1421 loadModules@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:31512 loadModules/<@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:31889 forEach@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:1421 loadModules@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:31512 loadModules/<@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:31889 forEach@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:1421 loadModules@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:31512 createInjector@http://localhost:5601/bundles/commons.bundle.js?v=8467:36:2586 doBootstrap@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:12235 bootstrap@http://localhost:5601/bundles/commons.bundle.js?v=8467:35:12764 5157/chrome.bootstrap@http://localhost:5601/bundles/commons.bundle.js?v=8467:87:23901 0@http://localhost:5601/bundles/roles.bundle.js?v=8467:1:314 __webpack_require__@http://localhost:5601/bundles/commons.bundle.js?v=8467:1:211 window.webpackJsonp@http://localhost:5601/bundles/commons.bundle.js?v=8467:1:862 @http://localhost:5601/bundles/roles.bundle.js?v=8467:1:1

我不知道我在做什么错？

ngAnimate模块不可用

0 个答案: