升级Angular 15时解析ag-grid.css文件遇到Loader加载问题

问题根源 #

你的ag-grid依赖版本严重混乱（涵盖23.x到31.x多个不兼容版本），不同版本模块间存在冲突；同时Angular CLI自带完整的CSS处理逻辑，手动添加css-loader反而会破坏CLI的默认配置，导致全局样式文件无法被正常解析。

修复步骤 #

1. 统一ag-grid所有依赖版本
   删除package.json中所有ag-grid相关的旧版本依赖，保留同一系列的31.x版本（ag-grid 31兼容Angular 14-16）。清理后的依赖示例：

   { 
     "dependencies": {
       "@ag-grid-community/angular": "^31.0.1",
       "@ag-grid-community/client-side-row-model": "^31.0.1",
       "@ag-grid-community/core": "^31.0.1",
       "@ag-grid-community/styles": "^31.0.1",
       "@ag-grid-enterprise/excel-export": "^31.0.1",
       "ag-grid-angular": "^31.0.1"
     },
     "devDependencies": {
       // 移除css-loader，Angular CLI已内置相关处理逻辑
       "typescript": "^4.9.5"
     }
   }
   

   执行npm install重新安装依赖。

2. 正确配置全局样式
   在angular.json的projects.[你的项目名].architect.build.options.styles数组中添加ag-grid的全局样式：

   "styles": [
     "@ag-grid-community/styles/ag-grid.css",
     "@ag-grid-community/styles/ag-theme-alpine.css", // 可选，添加你需要的主题样式
     "src/styles.css"
   ]
   

3. 清理缓存并重建项目
   执行以下命令清理缓存后重新构建：

   npm cache clean --force
   rm -rf node_modules package-lock.json
   npm install
   ng build
   

额外说明 #

• 避免同时使用@ag-grid-community/all-modules和按需导入的模块，新版本ag-grid推荐按需导入以减小打包体积。
• Angular CLI会自动处理CSS文件的加载、解析和打包，无需手动配置css-loader、style-loader等webpack loader。

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