在 Angular 中设置 ag-grid答案

【问题标题】：Setup ag-grid in Angular在 Angular 中设置 ag-grid
【发布时间】：2017-10-09 09:58:01
【问题描述】：

我正在尝试设置 ag-grid 我已经在运行的 Angular 项目，但我无法获得依赖项。在我们的项目中，我们有可用的 ag-grid 8.2.0 版本。我们没有 ag-grid-angular 或任何其他依赖项。要获得对 Angular 的 ag-grid 支持，我们是否还需要获得其他依赖项？如何设置 ag-grid 以在我的项目中工作？

UPDATE 1：如链接中所述，我们可以使用： 'ag-grid-angular' : 'node_modules/ag-grid-angular', 'ag-grid' : 'node_modules/ag-grid', “ag-grid-enterprise”：“node_modules/ag-grid-enterprise” }, 包：{ 'ag-grid-angular'：{ 默认扩展名：“js” }, “农业网格”：{ 默认扩展名：“js” }, 'ag-grid-enterprise': { 默认扩展名：“js” } ...其他包

但在我们的项目中，我们只有 ag-grid v8.2.0 可用，而不是 ag-grid-angular。 所以我可以输入“ag-grid”：{ 默认扩展名：“js” }，仅在我的 system.config 文件和 package.json 中。

ag-grid 是否也需要 ag-grid-angular 才能在 angular 2 中运行我怎样才能获得相同的结果，因为我们也无法访问 npm。

【问题讨论】：

这里是他们的guide 如果您在阅读了他们的指南后仍然遇到问题，那么请具体发布您尝试过的内容以及抛出的错误以及您的设置，以便我们可以更好地提供帮助诊断问题
ag-grid-angular 是应 google 请求带来的名称更改。您应该尽量保持最新。支持网站上的安装说明非常好，在提出此类问题之前也应遵循..

标签： angular ag-grid ag-grid-angular

【解决方案1】：

在 package.json 中添加依赖：

"ag-grid-angular": "^20.2.0",
"ag-grid-community": "^20.2.0",
"ag-grid-enterprise": "^20.2.0",
"@ag-grid-community/all-modules": "^22.0.0",
"@ag-grid-enterprise/all-modules": "^22.0.0",

在您的模块中添加 AgGridModule：

AgGridModule.withComponents([])
import {AgGridModule} from 'ag-grid-angular';

add style for theme ag grid in style.scss from node-module

在 app.component.ts 中添加以下代码

import 'ag-grid-enterprise';

【讨论】：

【解决方案2】：

创建 Angular 项目
添加 ag-grid 依赖项
在 AppModule 中添加 ag-grid 模块依赖
在styles.scss 中导入ag-grid 样式
使用 ag-grid-angular 组件渲染 ag-grid

以下网址可能对您有所帮助。 https://www.ag-grid.com/angular-getting-started/

【讨论】：

再好不过了。自从轮子发明以来，我一直在编码，但对 Angular 和 ag-grid 来说是新的。我已经处理了几个项目，这正是我解决它的方法。 1）从一个有效的项目开始清理......和2）找出为什么该应用程序有效而您的应用程序无效。他们的入门指南非常很好。

【解决方案3】：

是的，ag-grid 和 ag-grid-angular 都是必需的。 ag-grid-angular（以前的 ag-grid-ng2）是 Ag-Grid 代码库的 Angular 包装器。

【讨论】：

ag-grid-angular 是免费的还是收费的？此外，即使在节点模块中包含 ag-grid 和 ag-grid 之后，我也找不到各种示例中描述的 ag-grid/main？
如他们的文档中所述，enterprise 功能是唯一的付费功能。您需要许可证密钥才能使用它们。我建议先看看他们的回购：github.com/ceolter/ag-grid-angular-example

【解决方案4】：

在您的 systemjs.config.js 中声明 ag-grid 主文件的路径：

     'ag-grid': {
        main: 'main.js'
     },

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些即时帮助。一个正确的解释would greatly improve 其教育价值通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有类似但不相同的问题的读者更有用。请edit您的答案添加解释，并说明适用的限制和假设。

【解决方案5】：

是的，ag-grid-angular 需要 ag-grid-angular 才能在 angular 2 中运行。您需要在 package.json 文件中包含 ag-grid-angular 以获取依赖项。您可以使用 webpack 进行捆绑。

package.json

"dependencies": {
    "ag-grid": "^13.3.0",
    "ag-grid-angular": "^13.3.0"
}

app.module.ts

import {AgGridModule} from "ag-grid-angular";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
        AgGridModule.withComponents([
            ProficiencyCellRenderer
        ])
    ],
})

【讨论】：