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

Question

在版本 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？也欢迎任何有关企业版操作的信息。

Answer 1

如果你仍然想使用所有模块和 Angular ，设置如下:

添加 Ag-Grid 依赖项:

删除所有当前的 aggrid 依赖项。

如果您只想使用社区，只需添加 @ag-grid-community/all-modules

如果您想使用企业版，只需添加@ag-grid-enterprise/all-modules ，无需添加社区依赖，因为它已经包含在企业一中

添加 Angular 网格依赖项

而不是旧的 ag-grid-angular ，您现在应该使用 @ag-grid-community/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