Bootstrap 4 Карусель с ошибками в Angular 6

Question

Я пытаюсь запустить нативную карусель начальной загрузки 4 с кнопки ссылки из углового 6

<a class="text-center nav-link mr-3" href="#carousel" role="button" 
data-slide="next" 
(click)="onCarouselStart()">Toggle Slide Show!</a>

 <div 
id="carousel" 
class="carousel slide" 
[attr.data-interval]="carouselInterval" 
[attr.data-ride]="carouselRide" 
>
<!-- The slides -->...... </div>

в компоненте:

    carouselInterval: any = false;
    carouselRide: string = 'false';

        onCarouselStart() { 


    <!-- 1st option -->
    $('.carousel').carousel('cycle');
    $('.carousel').carousel({
      interval: 3000
    });

   <!-- 2nd option -->
   $('.carousel').carousel({
      interval: 3000
    });
   $('.carousel').carousel('cycle');


    <!-- 3rd option -->
     this.carouselInterval = 3000;
     this.carouselRide = 'carousel';
              }

При использовании 1-го варианта толькопервый слайд имеет анимацию, остальные показывают, но без анимации скольжения.

Когда я использую 2-й вариант, слайды анимируются, но каким-то образом это вызывает дополнительный слайд, и в результате получается беспорядок или карусель начинает скользить назад.

Когда я использую третий вариант, анимируется только первый слайд, а затем карусель останавливается.

Любые идеи, как начать карусель скнопка нормально?