Module 'angularGrid' is not available! with ag-grid and HotTowel

问题

I’m somewhat new to AngularJS and the HotTowel toolchain. The bower install of ag-grid places appropriate (.css & .js) links in the index.html file. The dependency to ‘angularGrid’ has been attempted against different modules (e.g. app, core, etc.) with no success. Code excerpts are included below.

At runtime, this results in a string of errors:

[$injector:modulerr] Failed to instantiate module app due to:

Error: [$injector:modulerr] Failed to instantiate module app.core due to:

Error: [$injector:modulerr] Failed to instantiate module angularGrid due to:

Error: [$injector:nomod] Module 'angularGrid' 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.

etc. . .

I can see the ag-grid script and style sheet files are indeed included at runtime in the browser tools debugger; but the error is (I think) telling me that the grid’s module can’t be found when attempting to load app.core - where I currently have stated the dependency.

Interestingly, these errors go away in the HotTowel project if I remove the ag-grid dependency entry from bower.json (manually linking the associated .css links in index.html) and copy ag-grid’s ‘angular-grid.js’ file into the client app structure (e.g., under the core folder). This approach raises other issues and concerns though.

Also, ag-grid does work ‘as advertised’ (i.e., from its bower directory) on my machine in simple AngularJS projects (outside of the HotTowel environment).

Is there somewhere a simple HotTowel project that makes use of ag-grid? Or can you offer advice on how to properly resolve this condition?

Excerpts from the HotTowel project. . .

From core.module.js:

(function () {
    'use strict';

    angular
        .module('app.core', [
            'ngAnimate', 'ngSanitize',
            'blocks.exception', 'blocks.logger', 'blocks.router',
            'angularGrid',
            'ui.router',
            'ngplus'
        ]);
})();

From index.html:

<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/ag-grid/dist/angular-grid.css" />
<link rel="stylesheet" href="/bower_components/ag-grid/dist/theme-fresh.css" />
<link rel="stylesheet" href="/bower_components/ag-grid/dist/theme-dark.css" />
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="/bower_components/toastr/toastr.css" />
<!-- endbower -->

<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/ag-grid/dist/angular-grid.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/bower_components/extras.angular.plus/ngplus-overlay.js"></script>
<script src="/bower_components/moment/moment.js"></script>
<script src="/bower_components/toastr/toastr.js"></script>
<!-- endbower -->

On background - as a quick path to 'successful release build’ (i.e., gulp build in HotTowel) - I have temporarily (until I can figure out how to address Karma configuration to support ag-grid) modified John Papa’s gulp file with:

gulp.task('test', ['vet', 'templatecache'], function (done) {
    //startTests(true /*singleRun*/ , done);
    badKarma(true /*phantomjs1xIssue*/ , done);
});

gulp.task('autotest', function(done) {
    //startTests(false /*singleRun*/ , done);
    badKarma(true /*phantomjs1xIssue*/ , done);
});

 /**
 * Can't use Angular Grid with Phantomjs 1.9.x.
 * The problem is supposed to be fixed in Phantomjs 2.0. - not yet supported in npm or VS2015.
 * See: http://angulargrid.com/forum/showthread.php?tid=2516&highlight=stopDragging
 */
function badKarma(phantomjs1xIssue, done) {
    done();
}

回答1:

It's a known issue with angular-grid and wiredep or automatic injector. Angular-grid does not depends on angular, it can run natively.

So, if you use wiredep, use overrides to make angular-grid depends to angular. or manually include angular before angular-grid

<script src="/bower_components/ag-grid/dist/angular-grid.js"></script>
<script src="/bower_components/angular/angular.js"></script>

<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/ag-grid/dist/angular-grid.js"></script>

来源：https://stackoverflow.com/questions/32738867/module-angulargrid-is-not-available-with-ag-grid-and-hottowel

标签

angularjs

module

bower

hottowel

angular-grid