如何在 Angular 8 中将 Ag-Grid 从版本 21 迁移到版本 22

How to migrate Ag-Grid from version 21 to version 22 in Angular 8

在版本 22 中,Ag-grid 从根本上改变了他们的代码,因此它现在部署在模块中,主要来自两个新包 @ag-grid-community/all-modules 或 @ag-grid-enterprise/all-modules。他们网站上的文档完全不清楚如何成功迁移到新版本 22。尤其是 Angular 应用程序。甚至代码示例也不起作用(它们引用了一个未知模块@ag-grid-community/angular)。

有人知道如何在 Angular 8 中将 Ag-Grid 从版本 21 迁移到版本 22 吗?也欢迎任何关于企业版的信息。

如果你还想使用所有模块和angular,设置如下:

添加 Ag-Grid 依赖项:

  • 删除所有当前的 aggrid 依赖项。
  • 如果您只想使用社区,只需添加 @ag-grid-community/all-modules
  • 如果你想使用企业版,只需要添加@ag-grid-enterprise/all-modules,不需要添加社区依赖,因为它已经包含在企业版中

添加Angular网格依赖

您现在应该使用 @ag-grid-community/angular

,而不是旧的 ag-grid-angular

所以现在,如果使用企业版,你所有的依赖项应该看起来像这样:

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

正在注册模块

现在是时候配置您的网格将使用的模块了。您可以配置它 per grid 或全局配置。

您可以将所有模块全局注册到您 app.module.ts 中的所有网格:

import {ModuleRegistry, AllModules} from '@ag-grid-enterprise/all-modules';


export class AppModule {


  constructor() {
    ModuleRegistry.registerModules(AllModules);
  }
}

更改导入

现在确保将所有导入从旧包修复到新包。

例如。

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

变成

import {AgGridAngular} from "@ag-grid-community/angular";

正在更新 CSS 导入

您需要确保所有 CSS 导入都更新到新的包系统。

例如,这个:

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
@import "~ag-grid-community/dist/styles/ag-theme-blue.css";

变成这样:

@import "~@ag-grid-community/all-modules/dist/styles/ag-grid.css";
@import "~@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css";
@import "~@ag-grid-community/all-modules/dist/styles/ag-theme-blue.css";

查看更多信息ag-Grid Modules: Migrating