'swiper-container' is not a known element on version 9

Question

After updating to swiper v9.0.3 it showing

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

1. If 'swiper-container' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'swiper-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.`

Was trying to update swiper in my angular project

Fourwheeler

Did you import the SwiperModule in your app.module.ts? – Rabbi

Yes, but not worked. It was working on version 8 – Fourwheeler

I've read a lot of docs and this one helped me. - https://mcmap.net/q/543511/-how-to-use-swiper-9-with-angular – Propound

Answer 1

I have the same problem: according to the page "Migrating from ion-slides to Swiper.js" 9 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.

So just try to declare "CUSTOM_ELEMENTS_SCHEMA" in your module file, where you want to use it.

Clever

I emphasize the point that is th esolution for me : it works only when I declare it in it the module file for each page, e.g., home.module.ts . – Horrorstruck

Answer 2

Swiper Angular components have been removed in v9. If you want to use v9, you need to change your Angular components to web components.

You can start with adding CUSTOM_ELEMENTS_SCHEMA to your app module's schema.

https://swiperjs.com/migration-guide-v9#swiper-angular

Abulia

Answer 3

Expanding on AdmiralBang's answer, I've noticed adding CUSTOM_ELEMENTS_SCHEMA to your module file doesn't eliminate the error. You'd have to restart your CLI and serve the application again.

Also, this works, whether you added it globally or within the template's module file

Iorgos

Answer 4

This

run ionic capacitor sync

worked for me.

Lepp