carousel shows all slides Angular 5

I'm trying to put a carousel in angle 5 and it's hell (for me). I have created a component to show the carousel, but it shows me all the slides (one under the other and superimposed by the bottom) and all the text in the lower part superimposed on each other.

The component has this code:

    <div class="container">
  <br>
  <div class="col-md-12">
    <div id="carouselDashboard" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselDashboard" data-slide-to="0" class="active"></li>
        <li data-target="#carouselDashboard" data-slide-to="1"></li>
        <li data-target="#carouselDashboard" data-slide-to="2"></li>
      </ol>

      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://lorempixel.com/1200/400" class="img-responsive" alt="">
          <div class="carousel-caption">
            <h3>Este es el Slide #1</h3>
            <p>Contenido a introducir</p>
          </div>
        </div>

        <div class="item">
            <img src="http://lorempixel.com/1200/400/city/2" class="img-responsive" alt="">
            <div class="carousel-caption">
              <h3>Este es el Slide #2</h3>
              <p>Contenido a introducir</p>
            </div>
        </div>

        <div class="item">
            <img src="http://lorempixel.com/1200/400/city/1" class="img-responsive" alt="">
            <div class="carousel-caption">
              <h3>Este es el Slide #3</h3>
              <p>Contenido a introducir</p>
            </div>
        </div>
      </div>
      <!-- Controles -->
      <a href="carouselDashboard" class="left carousel-control" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" arial-hidden="true"></span>
        <span class="sr-only">Anterior</span>
      </a>
      <a href="carouselDashboard" class="left carousel-control" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" arial-hidden="true"></span>
          <span class="sr-only">Anterior</span>
        </a>
    </div>
  </div>
</div>

And in the index.html I have put these 3 directives:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" crossorigin="anonymous">

Do you think it could be?