Ionic 5 angular - migrate ion-slides to swiper.js

user_9313109 0
Viewed 2359

I have received a warning for using ion-slides saying ion-slide is depricated and will be removed in ionic v7. and is suggest to use swipper.js instead.

Now I followed this swiper.js tutorial on how to integrate swiper with Ionic-angular project.

Installed swiper

npm install swiper@6

added styles

@import '~swiper/swiper';
@import '~@ionic/angular/css/ionic-swiper';

app Module

import { SwiperModule } from 'swiper/angular';

@NgModule({
  declarations: [AppComponent],
  ...
  imports: [
    ...
    SwiperModule
  ],
  ...
})

gallery.component.html

<swiper>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper>

gallery.component.ts

import SwiperCore from 'swiper';
import { IonicSwiper } from '@ionic/angular';

SwiperCore.use([IonicSwiper]);

and the Error I'm getting is:

NG0304: 'swiper' is not a known element

NG0304: 'swiper-slide' is not a known element

where do I import the missing components?

I have tried importing the SwiperComponent

import { SwiperComponent } from 'swiper/angular';

  declarations: [
    ...
    SwiperComponent
  ],

then I get an Error

Error: Type SwiperComponent is part of the declarations of 2 modules

swiper.js ionic-framework angular
4 Answers

Error: Type SwiperComponent is part of the declarations of 2 modules

The issue above basically occurs when a component is declared in 2 different modules.

Remove the SwiperModule in your app.module.ts and add the SwiperModule in your gallery module. Your gallery.module.ts should have the SwiperModule like the example below.

gallery.module.ts

import { SwiperModule } from 'swiper/angular';
imports: [
...
SwiperModule
],
user_54151530

I just ran into this as well. What helped me was the message in the console which a link to the migration information. See ion-slides (https://ionicframework.com/docs/next/api/slides), just make sure you switch to v6 in the header next to the Search bar if you don't use the link. There are specific instructions depending on the framework you are using.

For Angular (https://ionicframework.com/docs/next/angular/slides), it looks like you are most of the way there.

Remove the SwiperModule from your app module and place it in your gallery module like @dom.macs suggested.

In your html make the following changes:

<ion-slides> -> <swiper>
<swiperSlide> -> <ng-template swiperSlide>

You do not need to import the SwiperComponent.

Based on your code snippets that should fix your issue.

user_53401800

I've also had the same problem!

This issue is occuring because you're using an old version of @ionic/angular.

For Resolving this issue declare the swiper module in app.module.ts

then, update your @ionic/angular version to latest

npm i @ionic/angular

user_171627420

Like Indraraj26 said in your question's comment section:

wherever you have declared the galleryComponent, in that module, you will have to import swiperModule too

Also make sure to use <ng-template swiperSlide>Slide 1</ng-template> instead of <swiper-slide>Slide 1</swiper-slide>.

Essentially, both, the SwiperModule, and the component that is using <swiper>, have to live in the same module.


@NgModule({
  declarations: [
    ... ,
    GalleryComponent,
    ... ,
  ],
  imports: [ 
    ... ,
    SwiperModule,
    ... ,
  ],
})
export class ...Module {}
user_120590630
Related