datatable - ag-grid 不适用于 angular 1.x

Question

我正在尝试将 ag-grid 用于我的一项项目工作，并尝试使用 webpack 和 Angular 1.6 对其进行配置

我已将其配置如下

模块

var agGrid = require('ag-grid');
agGrid.initialiseAgGridWithAngular1(angular);

module.exports = angular.module('transModule', ['agGrid'])
.component('transComponent', transComponent)
.name;

控制器

  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}
    ];

    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
    };

html

<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>

但是当我使用 i 时，它显示如下

然后我尝试添加样式表如下

要求（'ag-grid/dist/styles/ag-grid.css'）；要求（'ag-grid/dist/styles/theme-fresh.css'）；

再一次，表格想要正确渲染，它将显示如下

有什么东西不见了吗？如果你能给我一些提示，我将不胜感激？？

Answer 1

我注意到在 ag-grid 中package.json它被引用main.js为入口点，实际上我发现整个lib文件夹内容加载在 Chrome DevTools 的 Source 选项卡中。

这是由于我需要 ag-grid 的方式：

var agGrid = require('ag-grid');
// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);

var myApp = 'myApp';
module.exports = myApp;

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

即使“入门”文档没有列出基于 Webpack 的解决方案，他们确实说要包含dist/ag-grid.js文件或缩小/无样式版本之一，所以我将第一行更改为：

var agGrid = require('ag-grid/dist/ag-grid.min.js');