Question

我们在我们的应用程序中使用ag-grid 14.0.0（基于AngularJS 1.5）。

我们有这段代码

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]失败实例化模块main由于：错误：[$ injector：modulerr]失败实例化模块应用程序由于：错误：[$ injector：modulerr]失败实例化模块app.contestants由于：错误：[$ injector：modulerr] 无法实例化模块 {＆＃34; DragSourceType＆＃34; {＆＃34; 0＆＃34;：＆＃34; ToolPanel＆＃34;＆＃34; 1＆＃34;：＆＃34; HeaderCell＆＃34;＆＃34 ; ToolPanel＆＃34;：0，＆＃34; HeaderCell＆＃34;：1}，＆＃34; HDirection＆＃34; {＆＃34; 0＆＃34;：＆＃34;左＆＃34;＆＃ 34; 1＆＃34;：＆＃34;右＆＃34;＆＃34;左＆＃34;：0，＆＃34;右＆＃34;：1}，＆＃34; VDirection＆＃34;：{＆＃34; 0＆＃34;：＆＃34;向上＆＃34;＆＃34; 1＆＃34;：＆＃34;向下＆＃34;＆＃34;向上＆＃34;：0，＆＃34;向下＆＃34;：1}，＆＃34; ROWTYPE＆＃34; {＆＃34; 0＆＃34;：＆＃34; HEADER_GROUPING＆＃34;＆＃34; 1＆＃34;：＆＃34; HEADER＆＃34;＆＃34; 2＆＃34;：＆＃34; BODY＆＃34;＆＃34; HEADER_GROUPING＆＃34;：0，＆＃34; HEADER＆＃34;：1，＆＃34; BODY＆＃ 34;：2}} 由于：错误：[ng：areq]参数＆＃39;模块＆＃39;得到了，不是一个功能宾语 http://errors.angularjs.org/1.6.6/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20Object

Answer 1

尝试像这样加载ag-grid：

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

initialiseAgGridWithAngular1(angular);

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

使用AngularJS 1.5

1 个答案: