Angular won't recognize SwiperJS HTML elements | Angular Community | Page 1

celest rain Jul 15, 2025, 3:00 PM

#

No matter what I do, my Angular/Ionic project won't recognize SwiperJS HTML components.
I attached a screenshot that shows it.

I am on Angular 20, Ionic 8, Swiper 11.

My component.ts:

import {Component, CUSTOM_ELEMENTS_SCHEMA, inject} from '@angular/core';
import { register } from 'swiper/element/bundle';
import { Swiper } from 'swiper/types';

register();

But I can't do some of the properties from the SwiperJS doc here: https://swiperjs.com/element, because it doesn't recognize it as an HTML element. Scroll down to the Angular section.

what do I do?

slim sequoia Jul 15, 2025, 3:02 PM

#

You can find the solution here: https://stackoverflow.com/a/77868631/9395772

regal totem Jul 15, 2025, 3:03 PM

#

Step 3 being the important one ☝️

short cradle Jul 15, 2025, 3:10 PM

#

I had to ng cache clean for some reason, or I got the same error

celest rain Jul 15, 2025, 3:35 PM

#

Unfortunately that stuff did not work

#

home.ts

schemas: [CUSTOM_ELEMENTS_SCHEMA]

main.ts

import { register as registerSwiperElements } from 'swiper/element/bundle';

registerSwiperElements();

if (environment.production) {
  enableProdMode();
}

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

#

I've removed node modules, removed package lock json, fresh install, cache clean. Doesn't matter I guess

regal totem Jul 15, 2025, 3:42 PM

#

And you are attempting to use swiper-container in home.ts's template?

celest rain Jul 15, 2025, 3:43 PM

#

 <swiper-container slides-per-view="1" space-between="10" centeredSlides="true"
                              loop="true" pagination="{clickable: true}"
                              effect="coverflow"    class="engageSwiper">
              @for (object of featuredEvents(); track object) {
                <swiper-slide (click)="navigateToEvents()">
                  <img ngSrc="{{object.imageUrl}}" class="custom" style="height: auto; width: auto" priority
                       width="1920" height="1080" alt="" ngSrcset="100w, 200w, 400w, 600w, 800w, 1200w, 1920w, 2560w">
                </swiper-slide>
              }
            </swiper-container>

#

Unknown html tag swiper-container

#

yes correct!

regal totem Jul 15, 2025, 3:45 PM

#

Is this error reported by your IDE? Or is it also reported by ng serve / ng build?

celest rain Jul 15, 2025, 3:49 PM

#

i would assume by ide.. ionic serve serves fine.

#

but I can't add certain attributes so i jsut attributed to an angular problem

regal totem Jul 15, 2025, 3:50 PM

#

"Can't add" meaning what exactly?

celest rain Jul 15, 2025, 3:54 PM

#

meaning when I do: [loop]="true" on the <swiper-container> it errors and doesn't like it (but still builds fine)

#

but that is shown what to do on the sswiper docs

regal totem Jul 15, 2025, 3:54 PM

#

What do you mean by "it errors"?

celest rain Jul 15, 2025, 3:55 PM

#

Unknown html tag swiper-container

regal totem Jul 15, 2025, 3:55 PM

#

This reeks of an IDE problem.

celest rain Jul 15, 2025, 3:55 PM

#

oops wrong one

#

Property loop is not provided by any applicable directives nor by <swiper-container> element

#

My intellij is relatively up to date. 2025.0.1

#

#

that's from the swiper docs, I should be able to do those on the element, but none of them show up

regal totem Jul 15, 2025, 3:58 PM

#

So it also doesn't work?

#

https://stackblitz.com/edit/stackblitz-starters-23yudkia?file=src%2Fmain.ts
This works fine

celest rain Jul 15, 2025, 4:10 PM

#

I know, that's what weird. I'm just trying to get it to recognize the HTML element, no matter what I do it doens't. But it still builds fine.

regal totem Jul 15, 2025, 4:12 PM

#

This sounds like a bug with the IDE. I would try Invalidate Caches in your IDE

celest rain Jul 15, 2025, 4:13 PM

#

I will try that!

celest rain Jul 15, 2025, 4:57 PM

#

that didn't work, and so the issue for things like:

                                  centeredSlides: true
                                },
                                '1100': {
                                  slidesPerView: 3,
                                  centeredSlides: true
                                },
                                '2050': {
                                  slidesPerView: 3,
                                  centeredSlides: true,
                                  setWrapperSize: true
                                }
                              }

they don't work...

#

because it doesn't like that attribute

#

with the []

regal totem Jul 15, 2025, 4:57 PM

#

"Don't work" meaning they show errors in your IDE?

#

Or they don't do what they should be doing?

celest rain Jul 15, 2025, 4:57 PM

#

Yes, they show errors, but then also in the html they don't do what they should be doing

#

#

it recognizes the fields but in the html it like partially tries to render it but breaks other stuff

#

that's the html

#

again, I'm assuming this because it's not recognizing Swiper elements as html elements

regal totem Jul 15, 2025, 5:03 PM

#

I don't know if Angular supports binding to properties of custom HTML elements.

celest rain Jul 15, 2025, 5:04 PM

#

It's in the Swiper docs though?

#

slim sequoia Jul 15, 2025, 5:17 PM

#

celest rain It's in the Swiper docs though?

Angular support and IDE support are two different things.
If everything is fine on ng serve, the issue is about Intellij here

celest rain Jul 15, 2025, 5:20 PM

#

slim sequoia Angular support and IDE support are two different things. If everything is fine ...

But would that (IDE errors) affect rendering of the HTML

slim sequoia Jul 15, 2025, 5:20 PM

#

celest rain But would that (IDE errors) affect rendering of the HTML

no

celest rain Jul 15, 2025, 5:21 PM

#

slim sequoia no

right, that's kind of what I'm dealing with, is it's rendering some of the properties, but not all of them

slim sequoia Jul 15, 2025, 5:23 PM

#

celest rain right, that's kind of what I'm dealing with, is it's rendering some of the prope...

what's the errro message by hovering 'breakpoints'?

celest rain Jul 15, 2025, 5:24 PM

#

I don't think it's an IDE thing. I just tried Webstorm and downloaded it and it still does not recognize swiper container

regal totem Jul 15, 2025, 5:53 PM

#

celest rain right, that's kind of what I'm dealing with, is it's rendering some of the prope...

What do you mean by "rendering"?

#

"breakpoints" is a property, not an attribute. You will not see it in the DOM.

#

DOM attributes can only represent strings, breakpoints is an object.

celest rain Jul 15, 2025, 5:55 PM

#

regal totem What do you mean by "rendering"?

Meaning, when I serve the application, some of the properties that are on swiper container and actually working. When I try to implement properties doing [], it breaks some of the other properties for some reason.

regal totem Jul 15, 2025, 5:55 PM

#

What do you mean by "break"?

#

Please be exact in your problem descriptions 😦

#

This works just fine...

#

https://stackblitz.com/edit/stackblitz-starters-23yudkia?file=src%2Fmain.ts

#

Right click on "<swiper-container>", "use in console":

#

If this doesn't work, that's a Swiper issue. Angular is doing everything correctly.

#

Removing other parameters, it works: https://stackblitz.com/edit/stackblitz-starters-23yudkia?file=src%2Fmain.ts

#

So... this is a swiper issue and has nothing to do with Angular.

celest rain Jul 15, 2025, 6:15 PM

#

I created a new angular project, added swiper, following that stack overflow article, and swiper container is still not recognized?

regal totem Jul 15, 2025, 6:23 PM

#

You are talking about in your IDE?

celest rain Jul 15, 2025, 6:30 PM

#

regal totem You are talking about in your IDE?

I've tried 2 different IDE's, should I try a third?

regal totem Jul 15, 2025, 6:32 PM

#

Which ones have you tried?

celest rain Jul 15, 2025, 6:32 PM

#

intellij ultimate, webstorm, and now visual studio code lol

regal totem Jul 15, 2025, 6:36 PM

#

Well, looks like IDE support for this is just non-existent

celest rain Jul 15, 2025, 6:56 PM

#

Yeah, this whole thing is pretty annoying. Didn't realize I would have these issues with it. Anyway, thank you so much for helping. it is greatly appreciated!

regal totem Jul 15, 2025, 6:59 PM

#

Personally, the times I've used Swiper in Angular I have ditched their recommended way to use the custom element and just did it like you'd do in Vanilla JS with viewChild.

celest rain Jul 15, 2025, 7:04 PM

#

Which example would that be?

regal totem Jul 15, 2025, 7:05 PM

#

https://swiperjs.com/get-started#add-swiper-html-layout
https://swiperjs.com/get-started#initialize-swiper

celest rain Jul 15, 2025, 7:07 PM

#

thank you will check that out!

celest rain Jul 15, 2025, 8:00 PM

#

regal totem <https://swiperjs.com/get-started#add-swiper-html-layout> <https://swiperjs.com/...

If you would be so kind, can I ask what I am missing here:

html:

 <div class="swiper engageSwiper">
              <!-- Additional required wrapper -->
              <div class="swiper-wrapper">
                <!-- Slides -->
                @for (object of featuredEvents(); track object) {
                  <div class="swiper-slide" (click)="navigateToEvents()">
                    <img ngSrc="{{object.imageUrl}}" class="custom" style="height: auto; width: auto" priority
                    width="1920" height="1080" alt="" ngSrcset="100w, 200w, 400w, 600w, 800w, 1200w, 1920w, 2560w">
                  </div>
                }
              </div>
              <!-- If we need pagination -->
              <div class="swiper-pagination"></div>

            </div>

.ts:

public swiper = new Swiper('.engageSwiper', {
    // configure Swiper to use modules
    modules: [Navigation, Pagination],
    spaceBetween: 10,
    pagination: {clickable: true},
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    slidesPerView: 1,
    centeredSlides: true,
    loop: true,
    effect: "coverflow",
    autoplay: {
      delay: 2000,
      reverseDirection: true,
      disableOnInteraction: true
    },
    coverflowEffect: {
      rotate: 0,
      stretch: 0,
      depth: 100,
      modifier: 2.5
    },
    breakpoints: {
      700: {
        slidesPerView: 2,
        centeredSlides: true
      },
      1100: {
        slidesPerView: 3,
        centeredSlides: true
      },
      2050: {
        slidesPerView: 3,
        centeredSlides: true,
        setWrapperSize: true
      }
    }
  });

The swiper does show on my webpage, but the swiper object that I created in my .ts I'm assuming is not being connected to my HTML tag? I am not sure how you ddi the viewChild thing either as i was trying to do research on that.

#

The HTML swiper shows on my webpage, but none of those properties work because I'm assuming they aren't connected to that html element

#Angular won't recognize SwiperJS HTML elements