NG8001: 'swiper-container' is not a known element:

Ionic Framework
1

I am in the process of updating my App from Ionic 6 to 7, and i am having some issues. I aim following this guide:
Set Up Swiper.js for Angular Slides [Example] | Ionic (ionicframework.com)

This is my code:

<ion-card>

        <swiper-container class="task" pager="true">
          <swiper-slide >
            Step 1:<br>
            Enable Bluetooth and Location on your device.
          </swiper-slide >
          <swiper-slide >
            Step 2:<br>
            Set the IoT WiFi device in Pairing Mode.
          </swiper-slide >
          <swiper-slide >
            Step 3:<br>
            Press "Connect" for avilable WiFi networks.
          </swiper-slide >
          <swiper-slide >
            Step 4:<br>
            Select the WiFi SSID or press "Scan" for an updated list.
          </swiper-slide >
          <swiper-slide >
            Step 5:<br>
            Set the WiFi security, default is WPA, for public networks select open.
          </swiper-slide >
          <swiper-slide >
            Step 6:<br>
            Set the WiFi password or keep it blank if it is not required.
          </swiper-slide >
          <swiper-slide >
            Step 7:<br>
            Press "Provision" to connect the IoT WiFi device to the selected WiFi network.
          </swiper-slide >
        </swiper-container>
        
      </ion-card>

As mentioned, I have updated my app.module.ts with the following:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';


@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  declarations: [AppComponent],
  //entryComponents: [],
  imports: [
    BrowserModule,
    HttpClientModule, 
    IonicModule.forRoot(),    
    AppRoutingModule,
    
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Then app.components.ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router } from '@angular/router'; 
import { Azureservice  } from './azureservice.service';
import { App } from '@capacitor/app';
import { register } from 'swiper/element/bundle';
import { Plugins } from '@capacitor/core';


register();
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  public appPages = [
    {
      title: 'My Account',
      url: '/myaccount',
      icon: 'home'
    },
    {
      title: 'Notifications',
      url: '/notification',
      icon: 'notifications'
    },
    {
      title: 'IoT Devices',
      url: '/node-view',
      icon: 'wifi'
    },
   
  ];

  public appPagesbottom = [
 
    {
      title: 'Contact us',
      url: '/contactus',
      icon: 'mail'
    },
    {
      title: 'Logout',
      url: '/logout',
      icon: 'log-out'
    },
  ];

Am i missing a step?

2

What is the error you got?

I believe it’s pagination, not pager in the <swiper-container> tag.

3

As a side note, @ionic-native was deprecated back in 2021. See A New Chapter for @ionic-native - Ionic Blog. You might want to change those packages over to awesome-cordova-plugins.

4

Also, on your app.ts you have to add
import { CUSTOM_ELEMENTS_SCHEMA, Component, OnInit, ElementRef, ViewChild } from '@angular/core'; whatever you need of that, im just copying and pasting from my code.

A very useful thing is to @ViewChild('swiper') swiperRef: ElementRef | undefined;

and then you can do something like

play () {
  let swiper = this.swiperRef?.nativeElement.swiper.autoplay
  console.log (swiper.running)
  if (!swiper.running)
    swiper.start ();
  else
    swiper.stop ();
}

getRange(start: number, end: number): number[] {
  return Array.from({ length: end - start + 1 }, (_, index) => start + index);
}

dont forget to this.swiperRef?.nativeElement.swiper.autoplay.stop (); it when destroying the component.