Angular — карусель Bootstrap 5 не работает

Я пытаюсь использовать Bootstrap Carousel в Angular (17). Кнопки «Предыдущий» и «Далее» не работают. Карусель остается на первом изображении. Никаких ошибок в консоли. Я вижу здесь много вопросов с одной и той же проблемой, но ни на один из них нет ответа (это работает).

Я скопировал/вставил следующий HTML-код (в компоненте с именем elements.comComponent.html) с веб-сайта Bootstrap и добавил несколько случайных изображений из Интернета:

<div class = "bd-example">
    <div id = "carouselExampleCaptions" class = "carousel slide" data-ride = "carousel">
      <ol class = "carousel-indicators">
        <li data-target = "#carouselExampleCaptions" data-slide-to = "0" class = "active"></li>
        <li data-target = "#carouselExampleCaptions" data-slide-to = "1"></li>
        <li data-target = "#carouselExampleCaptions" data-slide-to = "2"></li>
      </ol>
      <div class = "carousel-inner">
        <div class = "carousel-item active">
          <img src = "https://abeltasmanmuseum.nl/wp-content/uploads/2024/02/Foto-Borg-Rikkerda.jpeg" class = "d-block w-100" alt = "...">
          <div class = "carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </div>
        </div>
        <div class = "carousel-item">
          <img src = "https://abeltasmanmuseum.nl/wp-content/uploads/2024/02/1.jpg" class = "d-block w-100" alt = "...">
          <div class = "carousel-caption d-none d-md-block">
            <h5>Second slide label</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class = "carousel-item">
          <img src = "https://abeltasmanmuseum.nl/wp-content/uploads/2024/02/1.jpg" class = "d-block w-100" alt = "...">
          <div class = "carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </div>
        </div>
      </div>
      <a class = "carousel-control-prev" href = "#carouselExampleCaptions" role = "button" data-slide = "prev">
        <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
        <span class = "sr-only">Previous</span>
      </a>
      <a class = "carousel-control-next" href = "#carouselExampleCaptions" role = "button" data-slide = "next">
        <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
        <span class = "sr-only">Next</span>
      </a>
    </div>
  </div>

Файл Typescript выглядит следующим образом (там ничего не менялось, просто файл Angular TS по умолчанию):

import { Component } from '@angular/core';


@Component({
  selector: 'app-goals',
  standalone: true,
  imports: [],
  templateUrl: './goals.component.html',
  styleUrl: './goals.component.css'
})
export class GoalsComponent {

}

В файле angular.json я добавил ссылку Bootstrap как на скрипты, так и на стили:

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Есть ли у кого-нибудь идеи, чего еще не хватает?

Большое спасибо!!