Why Swiper is not being initialised on ionic modal?-CodePudding

I am trying to use Swiper Angular, on an Ionic Modal but the swiper is not being initialized. When the application runs it doesn't show any errors in the console but when the code is inspected I get this:

<swiper _ngcontent-kch-c220="">
  <!--container-->
  <!--container-->
  <!--container-->
</swiper>

This is how I implemented the swiper:

<swiper
  #swiper
  [slidesPerView]="3"
  [spaceBetween]="50"
  (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>
</swiper>

Component's Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SetupConfirmComponent } from '@shared/components/setup-confirm/setup-confirm.component';
import { IonicModule } from '@ionic/angular';
import { SwiperModule } from 'swiper/angular';

@NgModule({
  declarations: [SetupConfirmComponent],
  imports: [CommonModule, IonicModule, SwiperModule],
  exports: [SetupConfirmComponent],
})
export class SetupConfirmModule {}

Also, the CSS is imported into the main CSS file and is currently working as swiper works in other components perfectly.

CodePudding user response：

The problem with this is that the Component Module wasn't imported into the component where the Modal is actually called. While the modal works perfectly, even if not imported into the other module, it's dependencies like swiper seem to fail.