Ag-grille ne fonctionne pas avec angulaire et webpack

Question

J'essaie d'obtenir ag-grid pour fonctionner avec webpack. je l'ai fait la chose standard en ajoutant grille ag par NPM et a ajouté la référence à webpack.config en faisant ceci:

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

Le fichier est résolu et chargé dans le fichier d'index très bien. Et j'ai fait ce qui suit pour angulaire. Webpack résout également ce fichier et est inclus et chargé, mais quand j'exécute l'application, j'obtiens l'erreur suivante.

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

Je ne peux pas trouver le nom angularGridGlobalFunction dans ag-grid.js mais quand je commente la référence ag-grille alors l'application fonctionne très bien.

Alors, des suggestions?

Answer 1

donc ag-grid n'a pas besoin d'aliasing dans le fichier webpack.config.js, j'ai donc supprimé cela et aliasé le dossier 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"), 
    } 
}, 

-je ajouter en haut de mon fichier de module

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

et ils ont changé la référence du module angulaire

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

Et whatta vous le savez a travaillé

Si vous aimez frappe moi avec une upvote! Merci

Answer 2

Voici ce qui a fonctionné pour moi, d'abord la solution:

npm install imports-loader --save-dev 

Puis dans mon code, ajoutez ceci au tableau dans les chargeurs webpack-config.js

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

alors la problème:

L'ag-grille dans npm dans npm n'est pas "npm prêt", il n'y a aucune indication dans le code qu'ag-grid nécessite ("angulaire"). Ainsi, webpack est libre de le placer n'importe où dans le fichier et de le charger à tout moment. Dans mon cas, lorsque l'ag-grid était chargé, angulaire et window.angular étaient indéfinis, donc ag-grid chargé avant angulaire. L'ag-grid vérifie que window.angular est défini avant de créer le module, donc le module n'est jamais créé.

Les étapes ci-dessus ajoutent une cale, pour toujours charger angulaire avant ag-grille.