2

我正在尝试让 ag-grid 与 webpack 一起使用。我通过 npm 添加 ag-grid 并通过执行以下操作添加对 webpack.config 的引用来完成标准操作：

resolve: {
    alias: {"ag-grid" : path.resolve(__dirname, "./node_modules/ag-grid/dist/ag-grid.js")
}

该文件被解析并加载到索引文件中就好了。我已经为角度做了以下工作。

angular.module("cs-app", [require("ag-grid").name]);

Webpack 也解析了这个文件并被包含和加载，但是当我运行应用程序时，我得到了以下错误。

[$injector:modulerr] Failed to instantiate module angularGridGlobalFunction due to:
[$injector:nomod] Module 'angularGridGlobalFunction' 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.

我在 ag-grid.js 中找不到名称 angularGridGlobalFunction，但是当我注释掉对 ag-grid 的引用时，应用程序就可以正常工作。

所以有人建议吗？

4

2 回答 2

1

所以 ag-grid 不需要在 webpack.config.js 中使用别名，所以我删除了它并为 node_modules 文件夹添加了别名。

resolve     : {
    alias         : {
        // bind version of jquery-ui
        "jquery-ui" : "jquery-ui/jquery-ui.js",      
        // bind to modules;
        modules     : path.join(__dirname, "node_modules"),
        components  : path.join(__dirname, "components"),
        libs        : path.join(__dirname, "bower_components"),
    }
},

我在模块文件的顶部添加

require("ag-grid");
require("modules/ag-grid/dist/ag-grid.css");
require("modules/ag-grid/dist/theme-fresh.css");

并更改了角度模块参考

angular.module("cs-app", ["agGrid"]);

你知道它有效吗

喜欢的话就给我点个赞吧！谢谢

于 2015-10-30T02:49:09.577 回答
0

这对我有用，首先是解决方案：

npm install imports-loader --save-dev

然后在我的代码中，将它添加到 webpack-config.js 中的加载器数组中

{ test: require.resolve("ag-grid"), loader: "imports?importedAngular=angular" },

那么问题：

npm 中的 ag-grid 不是“npm 就绪”，代码中没有指示 ag-grid 需要（“angular”）。所以 webpack 可以自由地将它放在文件中的任何位置，并随时加载它。在我的情况下，当 ag-grid 加载时，angular 和 window.angular 是未定义的，所以 ag-grid 在 angular 之前加载。ag-grid 在创建模块之前检查 window.angular 是否已定义，因此永远不会创建模块。

上面的步骤添加了一个垫片，始终在 ag-grid 之前加载 angular。

于 2016-01-11T17:45:36.477 回答