Angular 8 中的 ngx-useful-swiper 设置给出错误

Question

我按照 this 指南在我的 Angular 8 应用程序中设置滑动滑块。

将 NgxUsefulSwiperModule 导入 app.module.ts

时出现以下错误

./node_modules/ngx-useful-swiper/fesm2015/ngx-useful-swiper.js 中的错误找不到模块：错误：无法在 'C:\Users\Dan\NewAngular\node_modules\ngx-useful-swiper\fesm2015'

中解析 'swiper/bundle'

我尝试删除 node_modules 文件夹并重新安装所有内容，但每次都失败。

有人可以告诉我我做错了什么吗？

这是我的 package.json 文件

{
  "name": "angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "run:prod": "ng build --prod",
    "test-single-run": "ng test --watch=false"
  },
  "private": true,
  "dependencies": {
    "@aleesaan/ng-scrollspy": "^1.0.2",
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/pwa": "^0.1000.0",
    "@angular/router": "~8.2.14",
    "@angular/service-worker": "~8.2.14",
    "@auth0/angular-jwt": "^4.0.0",
    "@iplab/ngx-file-upload": "^1.5.4",
    "@kolkov/angular-editor": "^1.1.5",
    "@microsoft/applicationinsights-web": "^2.0.0",
    "@nebular/eva-icons": "^4.6.0",
    "@nebular/theme": "^4.6.0",
    "@ng-bootstrap/ng-bootstrap": "^5.2.2",
    "@ng-select/ng-select": "^3.7.2",
    "@nicky-lenaers/ngx-scroll-to": "^9.0.0",
    "@thisissoon/angular-inviewport": "^4.2.2",
    "@thisissoon/angular-scrollspy": "^2.2.0",
    "angular-animations": "0.0.10",
    "angular-crumbs": "^3.0.1",
    "angular-scroll": "^1.0.2",
    "angular2-csv": "0.2.5",
    "angular2-jwt": "^0.2.3",
    "bootstrap": "^4.4.1",
    "bs4-toast": "^0.7.1",
    "classlist.js": "^1.1.20150312",
    "cors": "^2.8.5",
    "eva-icons": "^1.1.3",
    "font-awesome": "^4.7.0",
    "guid-typescript": "^1.0.9",
    "jquery": "^3.5.1",
    "jwt-decode": "^2.2.0",
    "microsoft-adal-angular6": "^1.3.0",
    "moment": "^2.27.0",
    "nebular-icons": "^1.1.0",
    "ng-click-outside": "^7.0.0",
    "ng-material-multilevel-menu": "^5.5.3",
    "ng-otp-input": "^1.7.7",
    "ng-pick-datetime": "^7.0.0",
    "ng-recaptcha": "^5.0.0",
    "ng-scroll-spy": "^1.0.1",
    "ng-sidebar": "^9.2.1",
    "ng-whiteboard": "^1.4.5",
    "ng2-completer": "^2.0.8",
    "ng2-google-charts": "^6.1.0",
    "ng2-smart-table": "1.5.0",
    "ng2-truncate": "^1.3.17",
    "ng5-slider": "^1.2.4",
    "ngx-chips": "^1.9.8",
    "ngx-drag-drop": "^2.0.0",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-logger": "4.2.0",
    "ngx-perfect-scrollbar": "^8.0.0",
    "ngx-quill": "^5.2.0",
    "ngx-scrollspy": "^1.2.1",
    "ngx-skeleton-loader": "2.6.1",
    "ngx-ui-loader": "^7.2.2",
    "ngx-useful-swiper": "^10.0.1",
    "pdfmake": "^0.2.0",
    "popper.js": "^1.16.1",
    "primeicons": "^2.0.0",
    "primeng": "^9.1.0",
    "quill": "^1.3.7",
    "quill-delta": "^4.1.0",
    "quill-emoji": "^0.1.4",
    "quill-mention": "^2.0.4",
    "roboto-fontface": "^0.10.0",
    "rxjs": "~6.4.0",
    "swiper": "^7.0.8",
    "tslib": "^1.13.0",
    "web-animations-js": "^2.3.2",
    "windows-10-icons": "^1.0.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.29",
    "@angular/cli": "^8.3.29",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.10.64",
    "@types/swiper": "^5.4.3",
    "codelyzer": "^5.2.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.2.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-edge-launcher": "^0.4.2",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "ng2-mock-component": "^0.2.0",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "3.5.3",
    "webpack": "^4.44.2"
  }
}

Answer 1

看起来 ngx-useful-swiper 与最新版本的 swiper 不兼容。

错误清楚地表明 ngx-useful-swiper 正在尝试访问您刚刚安装的 swiper 软件包中不可用的文件。

尝试安装不同版本的 swiper 滑块。

按照以下步骤操作：

1)卸载当前swiper

npm uninstall swiper

2) 安装旧版本

npm install swiper@6.8.1

这应该可以解决问题。

Answer 2

尝试安装 ngx-swiper-wrapper。它是在 swiper 上创建的，并且与 angular.

完美配合

这里是 ngx-swiper-wrapper 的 npm 页面（这个页面有一个安装的初始文档）：

https://www.npmjs.com/package/ngx-swiper-wrapper

Angular 8 中的 ngx-useful-swiper 设置给出错误

ngx-useful-swiper setup in Angular 8 gives error

swiper

angular

angular8

ngx-swiper-wrapper