如何在Angular 11中使用Ag-Grid 其企业版及社区版是否适配Angular 11

兼容性说明 #

Ag-Grid社区版和企业版均支持Angular 11，适配的版本区间为25.x ~ 27.x，28及以上版本的Ag-Grid最低要求Angular 12+，请勿选择过高版本。两个版本的Angular适配逻辑完全一致，不存在社区版支持、企业版不支持的情况。

具体集成配置步骤 #

• 第一步：安装对应版本的依赖包
  仅使用社区版执行以下命令：

  npm install ag-grid-community@27.3.0 ag-grid-angular@27.3.0
  

  使用企业版需额外安装对应版本的企业包：

  npm install ag-grid-enterprise@27.3.0
  

  注意所有ag-grid相关依赖的版本号必须完全一致，避免出现兼容性异常。

• 第二步：在业务模块中注册AgGridModule
  打开需要使用表格的模块文件（示例为app.module.ts），引入并注册组件：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AgGridModule } from 'ag-grid-angular';
  // 企业版需额外引入该依赖
  import 'ag-grid-enterprise';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      // 如有自定义单元格渲染组件，需填写到withComponents的入参数组中
      AgGridModule.withComponents([])
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 第三步：引入全局样式
  两种引入方式二选一即可：

  1. 在angular.json的styles配置项中添加路径：

  "styles": [
    "node_modules/ag-grid-community/styles/ag-grid.css",
    "node_modules/ag-grid-community/styles/ag-theme-alpine.css", // 可替换为其他官方主题
    "src/styles.css"
  ]
  

  2. 在全局styles.css中直接导入：

  @import "~ag-grid-community/styles/ag-grid.css";
  @import "~ag-grid-community/styles/ag-theme-alpine.css";
  

• 第四步：组件中调用表格
  业务组件ts示例：

  import { Component } from '@angular/core';
  import { ColDef } from 'ag-grid-community';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    // 列定义
    columnDefs: ColDef[] = [
      { field: 'name', headerName: '姓名' },
      { field: 'age', headerName: '年龄' },
      { field: 'address', headerName: '地址' }
    ];
  
    // 表格数据源
    rowData = [
      { name: '张三', age: 28, address: '北京' },
      { name: '李四', age: 32, address: '上海' },
      { name: '王五', age: 26, address: '广州' }
    ];
  }
  

  组件html模板示例：

  <ag-grid-angular 
      style="width: 100%; height: 500px;"
      class="ag-theme-alpine"
      [rowData]="rowData" 
      [columnDefs]="columnDefs">
  </ag-grid-angular>
  

注意事项 #

• 企业版付费功能引入ag-grid-enterprise后即可调用，仅需自行配置合规授权密钥即可，无需额外适配Angular 11。
• 若启动出现版本不匹配报错，优先检查所有ag-grid依赖的版本号是否完全一致，同时确认没有安装28及以上版本的相关包。

内容的提问来源于stack exchange，提问作者Basuchi