应用轮播问题 Angular 11，Bootstrap

如何解决应用轮播问题 Angular 11，Bootstrap

好的，所以我有角度应用。我想在我的主页中使用 app-carousel。好像是这样



<div class="row" style="margin-bottom:10px; margin-top:70px;">
    <div class='col-12'>  
            <ngb-carousel>  
                <ng-template ngbSlide>  
                    <img src="../../../assets/img-carousel/carousel1.jpg" class="img-fluid" style=" width: 100%"  alt="Futsal Practice">  
                    <div class="carousel-caption">  
                        <h3 style="color: rgb(255,255,255)">Futsal Practice</h3>  
                    </div>  
                </ng-template>  
                <ng-template ngbSlide>  
                    <img src="../../../assets/img-carousel/carousel2.jpg" class="img-fluid" style=" width: 100%"  alt="Tennis Practice">  
                    <div class="carousel-caption">  
                        <h3 style="color: rgb(255,255)">Tennis Practice</h3>  
                    </div>  
                </ng-template>  
                <ng-template ngbSlide>  
                    <img src="../../../assets/img-carousel/carousel3.jpg" class="img-fluid" style=" width: 100%"  alt="Basketball Practice">  
                    <div class="carousel-caption">  
                        <h3 style="color: rgb(255,255)">Basketball Practice</h3>  
                    </div>  
                </ng-template>  
            </ngb-carousel>  
        </div>  
</div>

在我的主页组件中，我想使用它：

 <app-carousel></app-carousel> 

 <div class="row text-center">

    <div class="col-lg-3 col-md-6 mb-4" *ngFor="let field of fields">
      <div class="card h-100" >
        <img class="card-img-top" src="{{ field.imgurl }}" height="150px" alt="">
        <div class="card-body">
          <h5 class="card-title">{{ field.name }}</h5>
          <p class="card-text"> <b> {{ field.priceHour }} PLN / Hour </b>  </p>
          <p class="card-text">(Time Schedule: {{ field.openTime }}:00 - {{ field.closeTime }}:00) </p>
        </div>
        <div class="card-footer">
          <a (click)="redirectToAngularCalendar(field)"  style="color:#fff; cursor: pointer;" class="btn btn-primary">Check Time Slots</a>
        </div>
      </div>
    </div>
  </div>

当然我在 angular.json 中也有这一行

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

并在导入 app.module.ts 中安装引导程序。问题是因为如果我有这条线，我看不到任何东西，包括主页 html 代码。一切都从主页上消失在我的网站上。没有错误，没有任何事情，我已经完成了。我希望你们能帮助我。