使用AngularJS 1.5，ag-grid無法正確加載

Question

我們嘗試在我們的應用程序（基於AngularJS 1.5）中使用ag-grid 14.0.0。

我們有這段代碼片段

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>

在嘗試了一個錯誤之后，我們立即遇到以下錯誤：

angular.js：116未捕獲錯誤：[$ injector：modulerr]由於以下原因而無法實例化模塊主：錯誤：[$ injector：modulerr]由於以下原因而無法實例化模塊應用程序：錯誤：[$ injector：modulerr]無法實例化模塊應用程序.contestant由於：錯誤：[$ injector：modulerr]無法實例化模塊{“ DragSourceType”：{“ 0”：“ ToolPanel”，“ 1”：“ HeaderCell”，“ ToolPanel”：0，“ HeaderCell”：1 }， “HDirection”：{ “0”： “左”， “1”： “右”， “左”：0， “右”：1}， “VDirection”：{ “0”： “向上”，” 1 “：” 向下 “ ”向上“：0， ”向下“：1}， ”ROWTYPE“：{ ”0“： ”HEADER_GROUPING“， ”1“： ”標題“， ”2“： ”BODY“，” HEADER_GROUPING“：0，” HEADER“：1，” BODY“：2}}由於：錯誤：[ng：areq]參數'module'不是一個函數，得到了對象http://errors.angularjs.org/1.6 0.6 /納克/ AREQ？P0 =模塊＆P1 =未％20A％20function％2C％20got％20Object

Answer 1

嘗試像這樣加載ag-grid：

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

initialiseAgGridWithAngular1(angular);

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