Ag-grid 不适用于 angular 和 webpack

Question

我正在尝试让 ag-grid 与 webpack 一起工作。我通过 npm 添加 ag-grid 并通过这样做添加了对 webpack.config 的引用来完成标准操作：

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

文件被解析并加载到索引文件中就好了。我为 angular.

完成了以下操作

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 的引用时，应用程序运行正常。

所以有人建议吗？

Answer 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 模块引用

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

你知道它有用吗

如果你喜欢它，请给我一个赞！谢谢

Answer 2

以下是对我有用的方法，首先是解决方案：

npm install imports-loader --save-dev

然后在我的代码中，将其添加到 webpack-config.js

中的 loaders 数组

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

那么问题：

npm中npm中的ag-grid不是"npm ready"，代码中也没有说明ag-grid需要("angular")。所以 webpack 可以自由地把它放在文件的任何地方，并随时加载它。在我的例子中，当 ag-grid 加载时，angular 和 window.angular 未定义，因此 ag-grid 在 angular 之前加载。 ag-grid 在创建模块之前检查 window.angular 是否已定义，因此永远不会创建模块。

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

Ag-grid 不适用于 angular 和 webpack

Ag-grid not working with angular and webpack

node.js

angularjs

webpack

ag-grid