Swiper 11 and Angular 17 SSR ERROR TypeError: this.el.nativeElement.initialize is not a function

[capstro]

Hi
I am getting this error in console, when I use Swiper in Angular 17 Server Side Rendering application.

ERROR TypeError: this.el.nativeElement.initialize is not a function.

This error occurs when I use directive for swiper

import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
import { SwiperContainer } from 'swiper/element';
import { SwiperOptions } from 'swiper/types';

@directive({
selector: '[appSwiper]',
standalone: true
})
export class SwiperDirective implements AfterViewInit {

@input() config?: SwiperOptions;

constructor(private el: ElementRef) { }

ngAfterViewInit(): void {
Object.assign(this.el.nativeElement, this.config);
this.el.nativeElement.initialize();
}
}

[jemys89]

afterNextRender(() => {
            const swiperParams = {
                breakpoints: {
                    100: {
                        slidesPerView: 3,
                    },
                    640: {
                        slidesPerView: 5,
                    },
                    1024: {
                        slidesPerView: 6,
                    },
                },
            };

            Object.assign(this.swiper2.nativeElement, swiperParams);
            this.swiper2.nativeElement.initialize();
        })

[Lereste]

swiper.component.ts

afterNextRender(() => {
  Object.assign(this.swiperElementRef.nativeElement, this.customSwiperOptions);
  this.swiperElementRef.nativeElement.initialize();
});

main.ts (If you are using Angular SSR)

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { register as registerSwiperElements } from 'swiper/element/bundle';

// Register Swiper custom elements. We do this
// before bootstrapping the Angular application
// so that they're available before any part of
// our application tries rendering them.
registerSwiperElements();

bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));