kokuz kokuz - 6 months ago 211
Javascript Question

can't load agGrid in dependencies

I'm trying to load agGrid in my angular project but i can't figure what i'm doing wrong in implementation.. The error i got is
Error: [$injector:nomod] Module 'ag.grid' is not available!
below is the scripts and dependencies i use to get agGrid in my project.



<link rel="stylesheet" type="text/css" href="bower_components/toastr/toastr.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-select/dist/select.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-loading-bar/build/loading-bar.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/nvd3/build/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-prettyjson/dist/ng-prettyjson.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ag-grid/dist/styles/ag-grid.css">







define([
'pages/transfer/grid/transfer-grid',
'pages/reports/reports/reports-config'

], function () {
var module = angular.module('app.pages.ePayment', [
'app.pages.transfer.grid',
'app.pages.reports.config',
'ngTable',
'agGrid'

]);


module.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('ePayment', {
url: '/ePayment',
views: {
contentView: {
templateUrl: 'app/pages/ePayment/ePayment.html'
}
}
});

}]);
module.run(['navigationMenuService', function (navigationMenuService) {
navigationMenuService.addMenuItem({
name: "ePayment",
link: "ePayment",
iconClass: "fa fa-money"
})
}]);

<script>window.name = "NG_DEFER_BOOTSTRAP!";</script>
<!-- build:remove:production -->
<script src="bower_components/angular/angular.js" type="text/javascript"></script>
<script src="bower_components/angular-animate/angular-animate.min.js" type="text/javascript"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<!-- <script angular-cache ojt preku require.js -->
<script src="bower_components/angular-filter/dist/angular-filter.min.js" type="text/javascript"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js" type="text/javascript"></script>
<script src="bower_components/angular-translate/angular-translate.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-ui-select/dist/select.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.min.js" type="text/javascript"></script>
<script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js" type="text/javascript"></script>
<script src="bower_components/quick-ngrepeat/quick-ng-repeat.js" type="text/javascript"></script>
<script src="bower_components/angular-nvd3/dist/angular-nvd3.min.js" type="text/javascript"></script>
<script src="bower_components/ng-prettyjson/dist/ng-prettyjson.min.js" type="text/javascript"></script>
<script src="bower_components/file-saver.js/FileSaver.js" type="text/javascript"></script>
<script src="bower_components/js-xlsx/dist/xlsx.core.min.js" type="text/javascript"></script>
<script src="bower_components/alasql/dist/alasql.min.js" type="text/javascript"></script>
<script src="bower_components/ng-table/dist/ng-table.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-grid/ui-grid.min.js" type="text/javascript"></script>
<script src="bower_components/ag-grid/dist/ag-grid.js" type="text/javascript"></script>





Did i call it wrong or what? i installed using bower ( bower install ag-grid ) .

Answer

One thing that I faced with ag-grid is that you have to mention it in index.html even before angularjs and the other thing is in your main module you have to call the function:

 agGrid.initialiseAgGridWithAngular1(angular);

Even before your module declaration.
Refer https://www.ag-grid.com/best-angularjs-data-grid/index.php
Try these things and see if it works for you.

Comments