ag-grid is not loading properly using AngularJS 1.5

Question

We using trying to use the ag-grid 14.0.0 in our application (AngularJS 1.5 based).

We have this snippets of codes

main.js

import angular from 'angular';
import angularUiRouter from '@uirouter/angularjs';
import angularUiBootstrap from 'angular-ui-bootstrap';
import angularSanitize from 'angular-sanitize';
import agGrid from 'ag-grid/dist/ag-grid';
import appModule from './app/app.module';
import './styles/app.less';


angular
  .module('main', [
    angularUiRouter,
    angularUiBootstrap,
    angularSanitize,
    appModule,
    agGrid
  ]);

app.module.js

import angular from 'angular';
import appComponent from './app.component';
....
....
....
import contestantsModule from './contestants/contestants.module';

/* @ngInject */
const defaultRouteConfig = ($stateProvider, $locationProvider, $urlRouterProvider) => {
  $locationProvider.html5Mode(true);
  $urlRouterProvider.otherwise('/home');
};

export default angular
  .module('app', [
    ....
.....
.....
.....,
    contestantsModule
  ])
  .config(defaultRouteConfig)
  .component('app', appComponent)
  .name;

contestants.module.js

import angular from 'angular';
import ContestantsComponent from './contestants.component';
import agGrid from 'ag-grid/dist/ag-grid';

/* @ngInject */
initialiseAgGridWithAngular1(angular);
const routing = ($stateProvider) => {
  $stateProvider.state('contestants', {
    url: '/contestants',
    template: '<contestants></contestants>'
  });
};

export default angular.module('app.contestants', ['agGrid'])
  .config(routing)
  .component('contestants', ContestantsComponent)
  .controller('ContestantsController', ['$scope', '$http', function($scope, $http) {

  }]).name;

contestants.component.js

class ContestantsComponent {
  /* @ngInject */

  constructor($scope, $http) {
    this.$scope = $scope;
    this.$http = $http;
    console.log('inside Constructor() contestants.component.js:::');
  }


  $onInit() {
    var columnDefs = [
      {headerName: "Make", field: "make"},
      {headerName: "Model", field: "model"},
      {headerName: "Price", field: "price"}
    ];

    var rowData = [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ];

    this.$scope.gridOptions = {
      columnDefs: columnDefs,
      rowData: rowData
    };
    console.log('inside onInit grid.component.js:::');
  }

}

export default {
  template: require('./contestants.component.html'),
  controller: ContestantsComponent
};

contestants.component.html

<div class="container-fluid">
  <h2>HERE</h2>
  <div ag-grid="gridOptions" class="ag-theme-fresh" style="height: 100%;"></div>
</div>

Right after trying that one we have this error:

angular.js:116Uncaught Error: [$injector:modulerr] Failed to instantiate module main due to: Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:modulerr] Failed to instantiate module app.contestants due to: Error: [$injector:modulerr] Failed to instantiate module {"DragSourceType":{"0":"ToolPanel","1":"HeaderCell","ToolPanel":0,"HeaderCell":1},"HDirection":{"0":"Left","1":"Right","Left":0,"Right":1},"VDirection":{"0":"Up","1":"Down","Up":0,"Down":1},"RowType":{"0":"HEADER_GROUPING","1":"HEADER","2":"BODY","HEADER_GROUPING":0,"HEADER":1,"BODY":2}} due to: Error: [ng:areq] Argument 'module' is not a function, got Object http://errors.angularjs.org/1.6.6/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20Object

Answer 1

Try to load ag-grid like this:

import {initialiseAgGridWithAngular1} from 'ag-grid/main';

initialiseAgGridWithAngular1(angular);

angular.module(MODULE_NAME, [
    'agGrid'
])