Angular 8项目配置ngx-useful-swiper提示找不到swiper/bundle模块如何解决

问题原因 #

你遇到的报错是版本兼容性不匹配导致的，具体有两处不匹配：

• 你安装的ngx-useful-swiper@10.0.1仅适配Swiper 6.x版本，你当前依赖的Swiper版本为7.0.8，Swiper 7重构了模块导出规则，移除了swiper/bundle的导入入口，这是触发模块找不到报错的直接原因。
• ngx-useful-swiper@10.x本身是为Angular 10及以上版本开发的，你使用的Angular 8和该版本不兼容。

解决方案 #

按以下步骤操作即可修复：

1. 先卸载当前安装的不兼容版本

npm uninstall ngx-useful-swiper swiper @types/swiper

2. 安装适配Angular 8的版本组合

npm install ngx-useful-swiper@6.0.0 swiper@5.4.5 --save
npm install @types/swiper@5.4.3 --save-dev

3. 在angular.json中引入Swiper样式
   找到angular.json文件下build > options > styles配置数组，添加Swiper的样式路径：

"styles": [
  "src/styles.scss",
  "node_modules/swiper/css/swiper.min.css"
]

4. 清理缓存重新安装依赖

# Windows系统如果删除命令报错，手动删除node_modules文件夹和package-lock.json文件即可
rm -rf node_modules package-lock.json
npm install

完成后重新启动项目即可正常引入NgxUsefulSwiperModule使用。

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