如何使AgGrid 22.1与Angular 10兼容并恢复企业版功能？

我之前帮团队处理过几乎一模一样的问题——Angular 10升级后，AgGrid 22.1企业版就陷入了“静默失效”的状态：既没水印也没控制台许可证警告，但分组、透视这些企业功能完全用不了。后来摸索出几个经过验证的可行方案，分享给你：

1. 严格控制许可证初始化与模块导入顺序 #

Angular 10的模块加载机制对导入顺序敏感度更高，AgGrid企业版的许可证初始化必须早于任何AgGrid模块的导入。修改你的AppModule代码：

// app.module.ts
// 第一步：先初始化许可证，这一步一定要放在最前面
import { LicenseManager } from 'ag-grid-enterprise';
LicenseManager.setLicenseKey('your-valid-license-key');

// 第二步：再导入AgGrid相关模块
import { AgGridModule } from 'ag-grid-angular';
// ...其他应用模块导入

@NgModule({
  imports: [
    AgGridModule.withComponents([]),
    // ...其他模块
  ],
  // ...
})
export class AppModule { }

2. 修正TypeScript配置适配AgGrid模块导出 #

Angular 10默认的TS配置和AgGrid 22.1的模块导出规则存在兼容问题，调整tsconfig.json的compilerOptions：

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2020",
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    // ...保留其他原有配置
  }
}

其中allowSyntheticDefaultImports确保能正确解析AgGrid的CommonJS模块导出，downlevelIteration解决部分迭代器兼容问题。

3. 清理依赖缓存并重新安装 #

有时候node_modules的缓存会导致依赖版本冲突或加载异常，执行以下命令重置依赖：

# 删除依赖文件夹和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

如果用Yarn管理依赖，对应替换为yarn相关命令即可。

4. 调整Angular构建优化规则 #

Angular 10的默认构建优化可能误将AgGrid企业版代码“树摇”掉，导致功能缺失。可以先临时关闭优化测试：

// angular.json
{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "optimization": false
          }
        }
      }
    }
  }
}

如果关闭优化后功能恢复，再针对性地将AgGrid包加入优化白名单，保留其他优化项：

"allowedCommonJsDependencies": [
  "ag-grid-community",
  "ag-grid-enterprise",
  "ag-grid-angular"
]

我身边有同事通过上述步骤的组合，成功让AgGrid 22.1稳定运行在Angular 10项目中，企业功能正常且无许可证相关问题。虽然AgGrid官方推荐v23适配Angular 10，但v22.1通过这些调整完全可以兼容，避开v23的样式变更。

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