模块 'angularGrid' 不可用！使用 ag-grid 和 HotTowel

Question

我对 AngularJS 和 HotTowel 工具链有些陌生。 ag-grid 的 bower 安装在 index.html 文件中放置适当的 (.css & .js) 链接。已尝试对不同模块（例如应用程序、核心等）依赖“angularGrid”，但没有成功。代码摘录如下。

在运行时，这会导致一串错误：

[$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. . .

我可以看到 ag-grid 脚本和样式 sheet 文件确实在运行时包含在浏览器工具调试器中；但错误是（我认为）告诉我在尝试加载时找不到网格的模块 app.core - 我目前已经声明了依赖关系。

有趣的是，如果我从 bower.json 中删除 ag-grid 依赖项（手动链接 index.html 中的关联 .css 链接），这些错误就会在 HotTowel 项目中消失，并且将 ag-grid 的“angular-grid.js”文件复制到客户端应用程序结构中（例如，在核心文件夹下）。不过，这种方法会引发其他问题和担忧。

此外，ag-grid 在我机器上的简单 AngularJS 项目（在 HotTowel 环境之外）中确实“像宣传的那样”工作（即，从它的 bower 目录）。

有没有使用 ag-grid 的简单 HotTowel 项目？或者您能否提供有关如何正确解决此情况的建议？

HotTowel 项目的摘录。 . .

来自core.module.js：

(function () {
    'use strict';

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

来自 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 -->

在后台 - 作为“成功发布构建”的快速路径（即 gulp 在 HotTowel 中构建） - 我暂时（直到我能弄清楚如何解决 Karma 配置以支持 ag-grid ) 修改了 John Papa 的 gulp 文件：

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();
}

Answer 1

这是 known angular-grid 和 wiredep 或自动注入器的问题。 Angular-网格不依赖于angular，它可以运行原生。

因此，如果您使用 wiredep，请使用覆盖使 angular-grid 依赖于 angular。或在 angular-grid

之前手动包含 angular

<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>

模块 'angularGrid' 不可用！使用 ag-grid 和 HotTowel

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

module

angularjs

bower

hottowel

angular-grid