Swiper issue - "Unknown html tag swiper-container"


I have an problem with swiper.

I have followed this guides:

Angular 16.1.1
swiper: 11.0.4

And have issue with “Unknown html tag swiper-container” i was switching schemas from app.module to certain module directly but it did not help.

Basically my swiper works just fine but there’s an issue with this not known element which blocks all functionality and option cus of error throwing

Anyone knows what might be the case?


Provide sample code.

Error: src/app/Module/MemoryEditor/Component/MemoryEditor/MemoryEditorBaseComponent.html:133:3 - error NG8001: 'swiper-container' is not a known element:
1. If 'swiper-container' is an Angular component, then verify that it is part of this module.
2. If 'swiper-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

133   <swiper-container  class="ion-margin">

I can serve an application so i know that the library of this swiper is somehow working but when im trying to fully build it byu yarn build its like this.

Also, can’t share the code, so could u specify what would help?

Sounds like you may skipped a step. You need to add:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

  schemas: [..., CUSTOM_ELEMENTS_SCHEMA]
1 Like

Yes sir, i know about this custom shema, but the point is that my application somehow does not respect this while not throwing any errors.

I even tried to put it in direct module.

Rn, i have working swiper with unknown element

I have the same problem too the swiper is working but without any options, and it display this in the ide

did you find a solution for this ?

I dropped this task for a while and i could not find any solution to that time, pretty annoying

Sadly, this does not solve my issue, its all set in app:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

  schemas: [..., CUSTOM_ELEMENTS_SCHEMA]

Hope we can get the answer soon o/

I tired to place it in AppModule and in every single module where it is used but its always

Which is weird because swiper work this way but still cant use this options freely

Have you register the swiper ?
Providing sample code for standalone application

 <swiper-container #swiperEx     
    [navigation]="true" >
 <swiper-slide  *ngFor="let img of swiper_images">
      <div class="swiper-zoom-container">
          <img [src]="img"/>                            

in .ts file

import { register } from 'swiper/element/bundle';
import {Swiper} from 'swiper';


  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,


@ViewChild("swiperEx") swiperEx ?: ElementRef<{ swiper: Swiper }>

  ngAfterViewInit(): void {
   onSlideChange() {

Check details