模块'angularGrid“不可!与AG-电网和HotTowel电网、模块、angularGrid、AG

2023-09-13 05:18:21 作者:掐指一算、你俩准散

我有点新的AngularJS和HotTowel工具链。凉亭安装 AG-网宿适当的(的CSS&安培; .js文件)中的index.html文件的链接。为'angularGrid'的依赖性已经尝试对不同的模块(例如程序,芯等)没有成功。 code摘录如下包含

在运行时,这会导致错误的字符串:

  

[$喷油器:modulerr]未能实例化模块的应用程序,因为:

    

错误:[$喷油器:modulerr]未能实例化模块app.core原因是:

    

错误:[$喷油器:modulerr]未能实例化模块angularGrid原因是:

    

错误:[$喷油器:NOMOD] 模块'angularGrid不可用!你要么拼写错误的模块名称,或忘了加载它。如果注册一个模块,确保指定的依赖关系作为第二个参数。

    

等。 。

我可以看到AG-电网脚本和样式表文件确实包含在浏览器工具调试运行;但错误的是(我认为)告诉我,网格的模块无法找到尝试加载时app.core - 在我目前已经指出的依赖

有趣的是,这些错误走在HotTowel项目,如果我删除bower.json(手动连接index.html中相关的.css链接)的AG-电网的依赖项,复制AG-网格的角grid.js 文件导入到客户端应用程序的结构(例如,核心文件夹下)。这种做法引起了其他问题和关注,虽然

此外,AG-网确实为标榜'(即,从凉亭目录)的简单AngularJS项目在我的机器上(外HotTowel环境)的工作。

有没有什么地方简单HotTowel项目,该项目利用AG-格?或者,你能就如何妥善解决这个条件建言?

从HotTowel项目摘录。 。

从core.module.js:rr

(函数(){r    使用严格的;rr    角r        .module('app.core',[r            'ngAnimate','ngSanitize',r            'blocks.exception','blocks.logger','blocks.router',r            angularGrid',r            ui.router',r            ngplusr        ]);r})();

rrr

Angular 2 核心模块详解

从index.html的:

rr

< - 鲍尔:CSS - >r<链接rel =stylesheet属性HREF =/ bower_components / AG-网/距离/角grid.css/>r<链接rel =stylesheet属性HREF =/ bower_components / AG-网/距离/主题fresh.css/>r<链接rel =stylesheet属性HREF =/ bower_components / AG-网/距离/主题dark.css/>r<链接rel =stylesheet属性HREF =/ bower_components /引导/距离/ CSS / bootstrap.css/>r<链接rel =stylesheet属性HREF =/ bower_components / FONT-真棒/ CSS / FONT-awesome.css/>r<链接rel =stylesheet属性HREF =/ bower_components / toastr / toastr.css/>r&所述;! - endbower - >rr< - 鲍尔:JS - >r<脚本的src =/ bower_components / jQuery的/距离/ jquery.js和>< / SCRIPT>r<脚本的src =/ bower_components / AG-网/距离/角grid.js>< / SCRIPT>r<脚本的src =/ bower_components /角/ angular.js>< / SCRIPT>r<脚本的src =/ bower_components /角动画/角animate.js>< / SCRIPT>r<脚本的src =/ bower_components /角的sanitize /角sanitize.js>< / SCRIPT>r<脚本的src =/ bower_components /角度的UI路由器/发行/角-UI-router.js>< / SCRIPT>r<脚本的src =/ bower_components / extras.angular.plus / ngplus-overlay.js中>< / SCRIPT>r<脚本的src =/ bower_components /力矩/ moment.js>< / SCRIPT>r<脚本的src =/ bower_components / toastr / toastr.js>< / SCRIPT>r&所述;! - endbower - >r     

rrr

在背景 - 作为快速路径成功发布版本(即,一饮而尽建立HotTowel) - 我暂时(直到我可以找出如何解决噶配置,以支持AG-网格)修改约翰爸爸的大口文件搭配:

rr

gulp.task('测试',['兽医','templatecache'] ,功能(完成){r    // startTests(真/ * * singleRun /,完成);r    badKarma(真/ * * phantomjs1xIssue /,完成);r});rrgulp.task(自动测试,函数(完成){r    // startTests(假/ * * singleRun /,完成);r    badKarma(真/ * * phantomjs1xIssue /,完成);r});rr / **r *不能使用角度网格与Phantomjs 1.9.x中r *该问题被认为是固定在Phantomjs 2.0。 - 尚不支持NPM或VS2015。r *请参阅:http://angulargrid.com/forum/showthread.php?tid=2516&highlight=stopDraggingr * /r功能badKarma(phantomjs1xIssue,完成){r    完成();r}

rrr

解决方案

这是已知的 问题具有角电网和wiredep或自动进样器。角网格不取决于棱角分明,它可以本地运行。

所以,如果你使用wiredep,使用覆盖,使角格在很大程度上取决于角。或者手动包括前角角网

 <脚本的src =/ bower_components / AG-网/距离/角grid.js>< / SCRIPT><脚本的src =/ bower_components /角/ angular.js>< / SCRIPT> 

 <脚本的src =/ bower_components /角/ angular.js>< / SCRIPT><脚本的src =/ bower_components / AG-网/距离/角grid.js>< / SCRIPT> 

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

解决方案

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>

to

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