添加 angular-gridster 时模块实例化失败

Question

我添加了另一个模块 'checklist-model'，它能够加载类似的配置。

错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module mmxDashboardApp due to: Error: [$injector:modulerr] Failed to instantiate module angular-gridster due to: Error: [$injector:nomod] Module 'angular-gridster' 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.

Bower.json

{
  "name": "mmx-dashboard",
  "version": "0.0.0",
  "dependencies": {
    "angular": ">=1.2.*",
    "json3": "~3.3.1",
    "es5-shim": "~3.0.1",
    "jquery": "~1.11.0",
    "bootstrap": "~3.1.1",
    "angular-resource": ">=1.2.*",
    "angular-cookies": ">=1.2.*",
    "angular-sanitize": ">=1.2.*",
    "angular-route": ">=1.2.*",
    "angular-bootstrap": "~0.11.0",
    "font-awesome": ">=4.1.0",
    "lodash": "~2.4.1",
    "checklist-model" : "~0.2.4",
    "nvd3" : ">=1.7.1",
    "angular-gridster" : "~0.11.7"
  },
  "devDependencies": {
    "angular-mocks": ">=1.2.*",
    "angular-scenario": ">=1.2.*"
  }
}

app.js

'use strict';

angular.module('mmxDashboardApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ui.bootstrap',
  'checklist-model',
  'angular-gridster'
])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);
  });

index.html

<!-- bower:js -->
      <script src="bower_components/jquery/dist/jquery.js"></script>
      <script src="bower_components/angular/angular.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/angular-bootstrap/ui-bootstrap-tpls.js"></script>
      <script src="bower_components/lodash/dist/lodash.compat.js"></script>
      <script src="bower_components/checklist-model/checklist-model.js"></script>
      <script src="bower_components/d3/d3.js"></script>
      <script src="bower_components/nvd3/build/nv.d3.js"></script>
      <script src="bower_components/javascript-detect-element-resize/detect-element-resize.js"></script>
      <script src="bower_components/angular-gridster/src/angular-gridster.js"></script>
      <!-- endbower -->

Answer 1

模块名称是 'gridster' 而不是 'angular-gridster'。

https://github.com/ManifestWebDesign/angular-gridster/blob/master/src/angular-gridster.js#L5

Answer 2

'use strict';

angular.module('mmxDashboardApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ui.bootstrap',
  'checklist-model',
  'gridster'  /* not  'angular-gridster'*/
])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);
  });

添加 angular-gridster 时模块实例化失败

Module instantiation failure when adding angular-gridster

javascript

angularjs

yo

angular-fullstack