can't load agGrid in dependencies

Issue

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 ) .

Solution

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.

Answered By - jsmtslch