Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

376
Vistas
Ionic 5 angular - migrar diapositivas de iones a swiper.js

Recibí una advertencia por usar ion-slides iones que dice que las diapositivas de iones están obsoletas y se eliminarán en ionic v7. y se sugiere usar swipper.js en su lugar.

Ahora seguí este tutorial de swiper.js sobre cómo integrar swiper con el proyecto Ionic-angular.

limpiador instalado

 npm install swiper@6

estilos añadidos

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

módulo de aplicación

 import { SwiperModule } from 'swiper/angular'; @NgModule({ declarations: [AppComponent], ... imports: [ ... SwiperModule ], ... })

galería.componente.html

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

galería.componente.ts

 import SwiperCore from 'swiper'; import { IonicSwiper } from '@ionic/angular'; SwiperCore.use([IonicSwiper]);

y el error que estoy recibiendo es:

NG0304: 'swiper' no es un elemento conocido

NG0304: 'swiper-slide' no es un elemento conocido

¿Dónde importo los componentes que faltan?

He intentado importar el SwiperComponent

 import { SwiperComponent } from 'swiper/angular'; declarations: [ ... SwiperComponent ],

entonces me sale un error

Error: Type SwiperComponent es parte de las declaraciones de 2 módulos

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Error: Type SwiperComponent es parte de las declaraciones de 2 módulos

El problema anterior básicamente ocurre cuando un componente se declara en 2 módulos diferentes.

Elimine SwiperModule en su app.module.ts y agregue SwiperModule en su módulo de galería. Su galería.module.ts debe tener SwiperModule como el ejemplo a continuación.

galería.módulo.ts

 import { SwiperModule } from 'swiper/angular'; imports: [ ... SwiperModule ],
over 4 years ago · Santiago Trujillo Denunciar

0

Acabo de encontrarme con esto también. Lo que me ayudó fue el mensaje en la consola con un enlace a la información de migración. Consulte ion-slides ( https://ionicframework.com/docs/next/api/slides ), solo asegúrese de cambiar a v6 en el encabezado junto a la barra de búsqueda si no usa el enlace. Hay instrucciones específicas según el marco que esté utilizando.

Para Angular ( https://ionicframework.com/docs/next/angular/slides ), parece que ya ha recorrido la mayor parte del camino.

Quite SwiperModule de su módulo de aplicación y colóquelo en su módulo de galería como sugirió @dom.macs.

En tu html haz los siguientes cambios:

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

No necesita importar SwiperComponent.

Basado en sus fragmentos de código que deberían solucionar su problema.

over 4 years ago · Santiago Trujillo Denunciar

0

¡Yo también he tenido el mismo problema!

Este problema ocurre porque está usando una versión anterior de @ionic/angular .

Para resolver este problema, declare el módulo swiper en app.module.ts

luego, actualice su versión @ionic/angular a la última

npm i @ionic/angular

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda