Angular 14升级至15后@swimlane/ngx-datatable样式导入报错

问题背景 #

将Angular项目从v14升级到v15后，在angular.json中设置"optimization": false时，使用@swimlane/ngx-datatable@20.0.0的组件出现以下错误：

'component'.component.scss?ngResource - Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '~@swimlane/ngx-datatable/index.css' in 'component'.

原因分析 #

Angular 15配套的webpack版本移除了对~前缀解析node_modules资源的支持，当关闭构建优化时，旧的路径解析逻辑完全失效，导致无法找到对应的CSS文件。

解决方法 #

方法1：修改组件内的样式导入路径

直接移除导入路径开头的~符号，Angular CLI会自动从node_modules目录中查找依赖资源。修改后的代码如下：

@import '@swimlane/ngx-datatable/index.css';
@import '@swimlane/ngx-datatable/themes/material.css';
@import '@swimlane/ngx-datatable/assets/icons.css';

方法2：全局导入样式（可选）

如果不想在每个使用ngx-datatable的组件中单独导入样式，可以在angular.json的styles数组中全局添加这些样式文件：

"styles": [
  "src/styles.scss",
  "@swimlane/ngx-datatable/index.css",
  "@swimlane/ngx-datatable/themes/material.css",
  "@swimlane/ngx-datatable/assets/icons.css"
]

验证 #

修改完成后，重启开发服务器或重新构建项目，确认错误已消失。

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