Angular: Swiper carousel is not working - Error: node_modules/swiper/angular/angular/src/swiper-events.d.ts

Question

I am trying to create a carousel in angular using swiper (https://swiperjs.com/angular).

I get this error:

Error: node_modules/swiper/angular/angular/src/swiper-events.d.ts:3:50 - error TS2344: Type 'SwiperEvents[Property]' does not satisfy the constraint '(...args: any) => any'. Type '((swiper: Swiper) => void) | ((swiper: Swiper) => void) | ((swiper: Swiper) => void) | ((swiper: Swiper) => void) | ((swiper: Swiper) => void) | ((swiper: Swiper) => void) | ... 75 more ... | undefined' is not assignable to type '(...args: any) => any'. Type 'undefined' is not assignable to type '(...args: any) => any'.

I have tried this:

-Uninstall and install again swiper with npm i swiper

-Uninstall swiper and install it again with npm i @types/swiper

Here is my code:

angular.json

    "styles": [
      "src/myTheme.scss",
      "src/styles.css",
      "node_modules/swiper/swiper-bundle.min.css"
    ],
    "scripts": ["node_modules/swiper/swiper-bundle.min.js"]
  },

The shared module

import { SwiperModule } from 'swiper/angular';
  exports: [
    SwiperModule,
    other modules
  ]

the component:

  config: SwiperOptions = {
    slidesPerView: 3,
    spaceBetween: 50,
    navigation: true,
    pagination: { clickable: true },
    scrollbar: { draggable: true },
  };

//in the methods
  onSwiper([swiper]) {
    console.log(swiper);
  }
  onSlideChange() {
    console.log('slide change');
  }

the HTLM

<swiper
      [config]="config"
      (swiper)="onSwiper($event)"
      (slideChange)="onSlideChange()"
    >
  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
  <ng-template swiperSlide>Slide 4</ng-template>
  <ng-template swiperSlide>Slide 5</ng-template>
  <ng-template swiperSlide>Slide 6</ng-template>
</swiper>

does sb have an idea of what is hapenning?? Thanks

Answer 1

I had exactly the same issue. Installing v7 solved the issue.

npm i swiper@7

Answer 2

Installing swiper@7 works. But for Angular 13, an error like this might show.

Error: node_modules/swiper/angular/angular/src/public-api.d.ts:1:15 - error TS2307: Cannot find module './swiper-events' or its corresponding type declarations.

1 export * from './swiper-events';

But this can be resolved by running a simple npm update.

Answer 3

To fix this error install : https://www.npmjs.com/package/ngx-swiper-wrapper

and install a specific version npm i [email protected] and it was solved.