Issue
In angular 17 everything is standalone component and there is no app.module.ts file. So, then where do we put this code,
import {register} from "swiper/element";
register();
I am getting this error, since register() is not properly registered,
ERROR TypeError: this.el.nativeElement.initialize is not a function
Fix this error:
ERROR TypeError: this.el.nativeElement.initialize is not a function
Solution
I got it working using swiper-elements
but its not a perfect solution, its a bit of an hack solution, I use CUSTOM_ELEMENTS_SCHEMA
to get rid of the angular errors, for element is not found, then it started working fine!
swiper wrapper html
<swiper-container
slides-per-view="1"
speed="500"
loop="true"
css-mode="true"
navigation="true"
pagination="true"
scrollbar="true"
>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
</swiper-container>
swiper wrapper ts
import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'app-swiper',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
templateUrl: './swiper.component.html',
})
export class SwiperComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.