AG Grid激活侧边栏时模块注册状态冲突问题咨询

可能成因 #

• 模块注册时机滞后：AG Grid表格实例初始化完成后才执行模块注册，导致表格无法识别已加载的工具面板模块。
• Angular模块导入不完整：仅通过ModuleRegistry注册模块，但未在Angular组件/模块的imports数组中正确配置AG Grid相关模块，依赖注入系统未正确加载模块。
• 多版本AG Grid冲突：项目中存在多个版本的AG Grid核心或企业包，注册的模块与表格实例依赖的版本不匹配。

解决方法 #

1. 提前完成模块注册 #

在表格配置初始化前完成模块注册，比如在组件的ngOnInit钩子中执行：

import { Component, OnInit } from '@angular/core';
import { ModuleRegistry } from '@ag-grid-community/core';
import { ColumnsToolPanelModule, FiltersToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html'
})
export class GridComponent implements OnInit {
  ngOnInit(): void {
    // 先注册模块，再定义表格配置
    ModuleRegistry.registerModules([ColumnsToolPanelModule, FiltersToolPanelModule]);
  }

  gridOptions = {
    sideBar: true,
    // 其他表格配置
  };
}

2. 结合Angular模块配置AG Grid #

在对应Angular模块（如AppModule或功能模块）中，通过AgGridModule的API导入所需模块，确保模块被Angular依赖系统正确加载：

import { NgModule } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
import { ColumnsToolPanelModule, FiltersToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';

@NgModule({
  imports: [
    // 按需导入指定企业模块
    AgGridModule.withModules([ColumnsToolPanelModule, FiltersToolPanelModule]),
    // 若需加载全部企业模块，可使用：AgGridModule.withEnterpriseModules()
    // 其他模块导入
  ]
})
export class AppModule { }

3. 统一AG Grid版本 #

执行命令检查AG Grid相关包的版本一致性：

npm list @ag-grid-community/core @ag-grid-enterprise/column-tool-panel ag-grid-angular

若存在版本不一致，卸载冲突包后重新安装统一版本：

npm uninstall @ag-grid-community/core @ag-grid-enterprise/column-tool-panel ag-grid-angular
npm install @ag-grid-community/core@30.1.0 @ag-grid-enterprise/column-tool-panel@30.1.0 ag-grid-angular@30.1.0

4. 显式配置侧边栏工具面板 #

通过显式配置工具面板的关联信息，确保表格正确识别已注册的模块：

gridOptions = {
  sideBar: {
    toolPanels: [
      {
        id: 'columns',
        toolPanel: 'agColumnsToolPanel',
        labelDefault: 'Columns'
      },
      {
        id: 'filters',
        toolPanel: 'agFiltersToolPanel',
        labelDefault: 'Filters'
      }
    ]
  },
  // 其他表格配置
};

5. 验证企业授权状态 #

虽然其他企业模块正常，仍可验证授权是否正确加载：

import { GridApi } from '@ag-grid-community/core';

onGridReady(params: { api: GridApi }) {
  console.log('Enterprise授权状态:', params.api.isEnterpriseEnabled());
}

若返回false，需检查gridOptions中licenseKey是否正确配置。

内容的提问来源于stack exchange，提问作者J. McBride