Owl Carousel from html to Angular JS

I'm converting html theme to angular js where I have some carousel that are working fine with Laravel. But when I converted the pages to Angular componenet, these carousels are not working.

<!--SLIDER START-->
<div class="home-slider">
    <!-- partial:index.partial.html -->
    <div class="hero-slider" data-carousel>
        <div class="carousel-cell" style="background-image:url(assets/images/commons/slider8.jpg);">
            <div class="overlay"></div>
            <div class="container slider-caption">
                <h5 class="subtitle">Affordable prices to anyone</h5>
                <h2 class="title">Cleaning your <br>worries away.</h2>
                <div class="slider-btn">
                    <a href="/contact-us" class="btn-washla btn-outline-blue btn-lg">Contact Us</a>
                    
                </div>
            </div>
        </div>
        <div class="carousel-cell" style="background-image:url(assets/images/commons/slider9.jpg);">
            <div class="overlay"></div>
            <div class="container slider-caption">
                <h5 class="subtitle">We clean. A lot.</h5>
                <h2 class="title">Because quality <br /> is necessary</h2>
                <div class="slider-btn">
                    <a href="/contact-us" class="btn-washla btn-outline-blue btn-lg">Contact Us</a>
                    
                </div>
            </div>
        </div>
        <div class="carousel-cell" style="background-image:url(assets/images/commons/slider10.jpg);">
            <div class="overlay"></div>
            <div class="container slider-caption">
                <h5 class="subtitle">Renew your look</h5>
                <h2 class="title">A tradition of <br />quality cleaning</h2>
                <div class="slider-btn">
                    <a href="/contact-us" class="btn-washla btn-outline-blue btn-lg">Contact Us</a>
                    
                </div>
            </div>
        </div>
    </div>
    <!-- partial -->
</div>
<!--SLIDER END-->

Only one picture is showing behind an overlay block. I can't select picture or text on the slider when I run the angular project. My Assets in index.html:

<link rel="stylesheet" href="assets/css/lib/bootstrap.min.css">
  <link rel='stylesheet' href="assets/css/lib/flickity.min.css">
  <link rel='stylesheet' href="assets/css/lib/magnific-popup.min.css">
  <link rel="stylesheet" href="assets/css/lib/owl.carousel.min.css">

<script src="assets/js/lib/jquery-3.5.1.min.js"></script>
  <script src="assets/js/lib/bootstrap.min.js"></script>
  <script src="assets/js/lib/plugins.js"></script>
  <script src="assets/js/main.js"></script>
  <script src="assets/js/slider.js"></script>