Я получаю глюк смены фона в угловом 6 слайдере, сделанном на заказ, как это убрать?

Question

Я получаю ошибку смены фона в угловом 6 слайдере, сделанном на заказ, как это убрать? Что делать, чтобы направить меня как можно скорее.

Когда я тестирую слайдер в режиме предварительного просмотра (изолированное окружение, просто слайдер во всплывающем окне), проблем не возникает. Так что я думаю, что это связано с JavaScript.

Есть идеи?

my code:
Typescript:`@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
    title = 'app';
    image = ['../assets/cumbria-web.jpg', '../assets/nothern-web.jpg', '../assets/welcome-couple.jpg'];
    couter = 0;
    ngOnInit(){
        var main = document.getElementById('main'); 
        main.style.backgroundImage = "url('"+this.image[this.couter]+"')";
        main.style.backgroundRepeat = "no-repeat";
        main.style.backgroundSize = "cover";
        main.style.transition = "all 3s linear";
        setInterval(()=>{
            this.couter++;
            if(this.couter == 3)
                this.couter = 0;
            main.style.backgroundImage = "url('"+this.image[this.couter]+"')";
        },5000);

    }

}`

HTML:`<div id="main" class="container-fluid" [ngStyle]="{'max-width':'1920px', 'height': '800px'}">
  <section class="content-section" [ngStyle]="{'max-width':'1920px', 'margin':'0 auto'}">
    <div class="slider_wrapper">
      <div class="layers" style="padding: 100px; width: 100%;">
        <div class="first-layer">
          <div class="truck_image">
            <img src="assets/check.png" alt="image">
          </div>
        </div>
          <div class="one animated-text">
            <h1 id="slide_one">
              <span>2</span><span>0</span><span>%</span><span>&nbsp;</span><span>O</span><span>F</span><span>F</span>
            </h1>
          </div>
          <div class="two animated-text">
            <h1 id="slide_two">
              <span>K</span><span>u</span><span>l</span><span>d</span><span>i</span><span>p</span>
            </h1>
          </div>
          <div class="three animated-text">
            <h1 id="slide_three">
              <span>K</span><span>u</span><span>l</span><span>d</span><span>i</span><span>p</span>
            </h1>
          </div>
        <div class="third-layer">
          <button id="booknow" class="booknow">BOOK NOW</button>
          <button id="getoffer" class="getoffer">GET OFFER</button>
        </div>
      </div>
      <div class="row mb-1 justify-content-center" style="margin-top: 8rem;">
        <nav class="navbar navbar-expand-lg navbar-light justify-content-center">
          <ul class="navbar-nav justify-content-center">
            <li class="nav-item margin-right-10 check-in" class="form-group col-3">
              <i class="fas fa-calendar-plus" style="position: absolute;top: 10px;left: 20px;z-index: 1;"></i>
              <ng-datepicker [(ngModel)]="startDate" [options]="startoptions" (ngModelChange)="onChange($event)">
              </ng-datepicker>
            </li>
            <li class="nav-item margin-right-10 check-out" class="form-group col-3">
              <i class="fas fa-calendar-minus" style="position: absolute;top: 10px;left: 20px;z-index: 1;"></i>
              <ng-datepicker [(ngModel)]="endDate" [options]="endoptions" [disabled]="!startDate"></ng-datepicker>
            </li>
            <li class="nav-item margin-right-10" class="form-group col-3">
              <div class="guest_no " style="position: relative;"><i class="custom_icon_class_icon fas fa-user" style="position: absolute;top: 13px;left: 8px;bottom: 0;right: 0;"></i><input type="text" id="guest_no" name="guest_no" placeholder="Berth" class="advanced_select form-control custom_icon_class_input" value="" style="padding: 2px 0 0px 25px;"></div>
            </li>
            <li class="nav-item margin-right-10 col-3">
              <button id="btn" class="btn search-btn" style="width: 100%;">Search</button>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </section>
</div>`