Pagination not working in Angular | SwiperJS

I am trying to use swiper.js and its pagination is not working, the slider is working but not pagination, here is the code.

ts

ngAfterViewInit(): void {
    new Swiper('.swiper-container', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      breakpoints: {
        767: {
          slidesPerView: 2,
        },
      },
    });
  }

html

<div class="swiper swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">IMAGE 1</div>
        <div class="swiper-slide">IMAGE 2</div>
        <div class="swiper-slide">IMAGE 3</div>
        <div class="swiper-slide">IMAGE 4</div>
        <div class="swiper-slide">IMAGE 5</div>

      </div>
      <div class="swiper-pagination"></div>
</div>

The slider is working and only two slides are being shown but the pagination isn't.

So I solved the solution by seeing Lucas answer, I had to add

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

register();

in the main.ts file