如何在 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";
在版本 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";