jquery - Why is my bootstrap carousel not working in angular?

Question

I have installed jquery and bootrap using npm install jquery --save and npm install bootstrap --save and they are found in the node_modules. I added the scripts to my angular.json file under "scripts" as following:

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

Here is my component.html file:

<div  class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="assets/grey.jpg" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
          <h1>Example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="assets/grey.jpg" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="assets/grey.jpg" alt="Third slide">
        <div class="carousel-caption d-none d-md-block">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
            </p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Here is my component.ts file:

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

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.scss']
})
export class CarouselComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Edit: Now I have added bootstrap into my angular.json file under scripts as well as suggested by Raj below but it is still not working.

"styles": [
              "node_modules/bootstrap/dist/scss/bootstrap.scss",
              "src/styles.scss"
]

标签： jqueryangularbootstrap-4

Answer 1

Use boostrap v4.0.0, After v4.1.0 carousel can't work on a lot of browser, even official demo page can't work.

Install and import in angular.json.

npm install bootstrap@4.0.0 jquery@3.3.1 --save

"styles": [
 "node_modules/bootstrap/dist/scss/bootstrap.scss",
 "src/styles.scss"
]

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