Swiper-container is not know element

Ionic Framework
1

Hello, im updating my ionic 6 code to ionic 7 and i read ion-slides are removed from this version, and i should use swiper-slides, so i followed this guide Set Up Swiper.js for Angular Slides [Example] | Ionic (ionicframework.com), but the tag is unknowed.

The pages are in src/pages/pageFolder instead of src/pageFolder

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule,
    IonicModule.forRoot({
      mode: 'ios', //ios or md
    }), AppRoutingModule, HttpClientModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

import { Component } from '@angular/core';
import { register } from 'swiper/element/bundle';
register();

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  constructor() { }
}

"dependencies": {
    "@angular/common": "15.2.9",
    "@angular/core": "15.2.9",
    "@angular/forms": "15.2.9",
    "@angular/platform-browser": "15.2.9",
    "@angular/platform-browser-dynamic": "15.2.9",
    "@angular/router": "15.2.9",
    "@capacitor/android": "5.0.0",
    "@capacitor/app": "5.0.0",
    "@capacitor/core": "5.0.0",
    "@capacitor/haptics": "5.0.0",
    "@capacitor/ios": "5.0.0",
    "@capacitor/keyboard": "5.0.0",
    "@capacitor/status-bar": "5.0.0",
    "@ionic/angular": "^7.0.5",
    "ionicons": "^6.0.3",
    "rxjs": "7.8.1",
    "swiper": "^9.2.4",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "15.2.8",
    "@angular-eslint/builder": "^14.0.0",
    "@angular-eslint/eslint-plugin": "^14.0.0",
    "@angular-eslint/eslint-plugin-template": "^14.0.0",
    "@angular-eslint/template-parser": "^14.0.0",
    "@angular/cli": "15.2.8",
    "@angular/compiler": "15.2.9",
    "@angular/compiler-cli": "15.2.9",
    "@angular/language-service": "15.2.9",
    "@capacitor/cli": "5.0.0",
    "@ionic/angular-toolkit": "9.0.0",
    "@ionic/cli": "6.20.9",
    "@types/jasmine": "4.3.1",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.59.2",
    "@typescript-eslint/parser": "5.59.2",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-jsdoc": "30.7.13",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "jasmine-core": "4.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-node": "8.10.2",
    "typescript": "^4.8.4"
  },
1 Like
2

You have to use the CUSTOM_ELEMENTS_SCHEMA in the component in which you’re using the swiper not the app.module

1 Like
3

In module.ts

import {SwiperSlidesComponent} from '../components/swiper-slides/swiper-slides.component'
import { SwiperModule } from 'swiper/angular';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    SwiperModule
  ],
  declarations: [HomePage, SwiperSlidesComponent]
})
export class HomePageModule {}

In .html

<swiper #swiper1 [keyboard]="true" [loop]="true" [slidesPerView]="1"
[pagination]="{type:'bullets', clickable:true}"
[navigation]="true" [scrollbar]="{draggable:true}" 
effect="flip" [autoplay]="true">

    <ng-template swiperSlide *ngFor="let img of images">
        <div 
        style="background-image: url({{img}}); background-size: cover; 
        background-color: antiquewhite;width: 100%;height:100%"> 
          <div style="margin-top: 10%;">Slide </div>
        </div>
    </ng-template>    
</swiper>

Reference
///Ionic 6 Angular Swiper JS with Autoplay, Effects, Scrolls, Navigation and more - YouTube

4

maybe the version 9 is the problem?
try to install 8.4.6

5

You’re missing the schemas: [CUSTOM_ELEMENTS_SCHEMA] entry in your module. Because swiper doesn’t provide angular components, only web components, you need to tell angular to support web components.

6

I added the custom in app.module.ts , is not global for all the project?

Adding to custom module of my page component it work.
Really i need to add in every my custom module?

1 Like
7

I have the same problem: according to the page “Migrating from ion-slides to Swiper.js” in the official documentation the schema CUSTOM_ELEMENTS_SCHEMA can be declared globally in app.module.ts, but for me it works only when I declare it in it the module file for each page, e.g., home.module.ts.

8

Do you use standalone components with ionic 7? Because I think using this means that we have to declare the schema in each component

This post helped me a lot : web component - How to use swiper 9 with angular - Stack Overflow

But the problem is that I can’t get the events to work.

9

When during the creation of the project I was asked “Would you like to build your app with NgModules or Standalone Components?”, then I opted for “NgModules”. So I am not using the new standalone components.