Настройка ngx-полезного-swiper в Angular 8 дает ошибку

Я следовал этому руководству, чтобы настроить слайдер Swiper в моем приложении Angular 8.

Я получаю следующую ошибку при импорте NgxUsefulSwiperModule в app.module.ts

ОШИБКА в ./node_modules/ngx-useful-swiper/fesm2015/ngx-useful-swiper.js Модуль не найден: Ошибка: не удается разрешить swiper / bundle в 'C:\Users\Dan\NewAngular\node_modules\ngx -полезный-swiper\fesm2015'

Я попытался удалить папку 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"
  }
}
Источник

2 ответа

Решение

Похоже, он несовместим с последней версией.

В ошибке четко указано, что ngx-useful-swiper пытается получить доступ к файлу, которого нет в только что установленном вами пакете.

Попробуйте установить другую версию swiper слайдер.

Следуй этим шагам:

1) Удалить текущий swiper

      npm uninstall swiper

2) Установить старую версию

      npm install swiper@6.8.1

Это должно делать свое дело.

Источник

Попробуйте установить ngx-swiper-wrapper . Он был создан с помощью swiper и отлично работает с angular.

Вот страница npm ngx-swiper-wrapper (на этой странице есть исходный документ для установки):

https://www.npmjs.com/package/ngx-swiper-обертка

Источник
Другие вопросы по тегам