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));

[king-martinien]

Hello, I encounter the same issue using Swiper 11 with Angular 19 and SSR.

My Setup :

• Angular : 19
• Swiper : 11
• SSR enabled

Issue :

When calling this.swiperElement.initialize() inside AfterViewInit in a custom directive, I get the following error : ERROR TypeError: this.swiperElement.initialize is not a function

Steps to reproduce :

1. Use <swiper-container> inside Angular component.

<swiper-container appSwiper [swiperOptions]="swiperOptions" init="false">
  <swiper-slide>1</swiper-slide>
  <swiper-slide>2</swiper-slide>
  <swiper-slide>3</swiper-slide>
</swiper-container>

2. Create an directive where swiperElement.initialize() is called inside ngAfterViewInit().
3. Run the app with SSR enabled.

Workaround :

I fixed the issue by ensuring initialize() is only called in the browser :

import {AfterViewInit, Directive, ElementRef, inject, input, InputSignal, PLATFORM_ID} from '@angular/core';
import {SwiperContainer} from 'swiper/element';
import {SwiperOptions} from 'swiper/types';
import {isPlatformBrowser} from '@angular/common';

@Directive({
  selector: '[appSwiper]'
})
export class SwiperDirective implements AfterViewInit {
  readonly #platformId: Object = inject(PLATFORM_ID);
  swiperElement: SwiperContainer = inject(ElementRef).nativeElement;
  swiperOptions: InputSignal<SwiperOptions> = input.required<SwiperOptions>();

  ngAfterViewInit(): void {
    Object.assign(this.swiperElement, this.swiperOptions());
    if (isPlatformBrowser(this.#platformId)) {
      this.swiperElement.initialize();
    }
  }
}

This prevent calling initialize() on the server, which solving the problem.

Question :

Is there an official way to handle this issue in an SSR environment ? Or Should Swiper automatically check for SSR compatibility ?
Thanks in advance.