CODEWITHSUNDEEP
angularjsnode.jswebpackag-grid
wendellmva
wendellmva

Reputation: 1944

Ag-grid not working with angular and webpack

I am trying to get ag-grid to work with webpack. I've done the standard thing by adding ag-grid through npm and added the reference to webpack.config by doing this:

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

The file gets resolved and loaded into the index file just fine. And I've done the following for angular.

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

Webpack also resolves this file and gets included and loaded up but when I run the app I get the following error.

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

I can't find the name angularGridGlobalFunction in ag-grid.js but when I comment out the reference to ag-grid then the app works just fine.

So anyone suggestions?

Upvotes: 2

Views: 5915

Answers (2)

Tony BenBrahim
Tony BenBrahim

Reputation: 7290

Here is what worked for me, first the solution:

npm install imports-loader --save-dev

Then in my code, add this to the loaders array in the webpack-config.js

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

then the problem:

The ag-grid in npm in npm is not "npm ready", there is no indication in the code that ag-grid requires("angular"). So webpack is free to put it anywhere in the file, and load it any time. In my case, when ag-grid loaded, angular and window.angular were undefined, so ag-grid loaded before angular. The ag-grid checks that window.angular is defined before it creates the module, so the module is never created.

The steps above add a shim, to always load angular before ag-grid.

Upvotes: 0

wendellmva
wendellmva

Reputation: 1944

so ag-grid does not need aliasing in the webpack.config.js so I removed that and aliased the node_modules folder.

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"),
    }
},

I add at the top of my module file

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

And changed the angular module reference

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

And whatta you know it worked

If you like it hit me with an upvote! Thanks

Upvotes: 1

Related Questions