Error 'swiper-slide' is not a known element after migrating from ion-slides

user_4151784 0
Viewed 2441

I updated my Angular Ionic 5 application and trying to migrate from ion-slides to Slides. I am following the official docs.

  • I installed swiper npm install swiper@6
  • Did import in the scss file @import '~swiper/swiper';
  • Did import the SwiperModule in app.module.ts and my page.module.ts
import { SwiperModule } from 'swiper/angular';
@NgModule({
  imports: [SwiperModule],
})
export class AppModule {}

The HTML page is able to recognize swiper after I imported the SwiperModule in my page.module.ts but it's not able to recognize swiper-slide and showing error 'swiper-slide' is not a known element

<swiper>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper>
ionic5 swiper.js ionic-framework angular
2 Answers

After adding to AppModule, Please add SwiperModule to Page Level Module also where component is registered.

user_112048960

On the ionic documentation:

<ion-content>
  <swiper>
    <ng-template swiperSlide>Slide 1</ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
  </swiper>
</ion-content>
user_55171610
Related