ngx-useful-swiper setup in Angular 8 gives error

Question

I followed this guide to set up swiper slider in my Angular 8 application.

I get the below error when importing NgxUsefulSwiperModule into app.module.ts

ERROR in ./node_modules/ngx-useful-swiper/fesm2015/ngx-useful-swiper.js Module not found: Error: Can't resolve 'swiper/bundle' in 'C:\Users\Dan\NewAngular\node_modules\ngx-useful-swiper\fesm2015'

I tried deleting the node_modules folder and reinstalling everything but it fails every time.

Can someone please tell me what I'm doing wrong?

This is my package.json file

{
  "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

Looks like ngx-useful-swiper is not compatible with the latest version of swiper.

The error clearly states that ngx-useful-swiper is trying to access a file that's not available in the swiper package you just installed.

Try installing a different version of swiper slider.

Follow these steps:

1) Uninstall the current swiper

npm uninstall swiper

2) Install older version

npm install [email protected]

That should do the trick.

Answer 2

Try installing ngx-swiper-wrapper. It has been created upon swiper and working perfectly with angular.

Here is the npm page of ngx-swiper-wrapper (this page has an initial doc for installing):

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