Hi,
I have an problem with swiper.
I have followed this guides:
using:
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';
@NgModule({
schemas: [..., CUSTOM_ELEMENTS_SCHEMA]
});
...
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';
@NgModule({
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
initial-slide="0"
[navigation]="true" >
<swiper-slide *ngFor="let img of swiper_images">
<div class="swiper-zoom-container">
<img [src]="img"/>
</div>
</swiper-slide>
</swiper-container>
in .ts file
import { register } from 'swiper/element/bundle';
import {Swiper} from 'swiper';
then
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
.....
and
@ViewChild("swiperEx") swiperEx ?: ElementRef<{ swiper: Swiper }>
ngAfterViewInit(): void {
register();
}
onSlideChange() {
console.log(this.swiperEx?.nativeElement.swiper.activeIndex);
}