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
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
],
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.
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