无法运行在角度生产的boostrap 3.3.7中使用的多项目轮播

Question

在这里我正在使用引导程序3.3.7和angular 6创建多项目轮播，我的问题是：1.在按next和prev时，我的多项目轮播正在移动，但是在按next时，它相互重叠/堆叠在一起，并且这是轮播在本地工作，但在ng bulild-生产版本的prod中不工作

下面是我的问题https://youtu.be/7cjbHgTsVjc

的直观表示

下面是我的代码

.html代码

<div class="container">
    <div class="row">
        <div class="col-xs-12" id="datacase">
            <h2 class="h">Test Data</h2>


            <div id="imageCarousel" class="carousel slide" data-interval="2000" data-ride="carousel" data-pause="hover" data-wrap="true">

                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-lg-4">


                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=A" alt="Card image cap">
                                    <h5>A CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> A Content

                                    </p>


                                </div>

                            </div>
                            <div class="col-lg-4">

                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=B" alt="Card image cap">
                                    <h5>B CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> B Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=C" alt="Card image cap">
                                    <h5>C CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> C Content

                                    </p>


                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=D" alt="Card image cap">
                                    <h5>D CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> D Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=E" alt="Card image cap">
                                    <h5>E CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> E Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=F" alt="Card image cap">
                                    <h5>F CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs">F Content

                                    </p>


                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=G" alt="Card image cap">
                                    <h5>g CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> g Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=H" alt="Card image cap">
                                    <h5>H CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> H Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=I" alt="Card image cap">
                                    <h5>I CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs">I Content

                                    </p>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <a href="#imageCarousel" class="carousel-control left" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#imageCarousel" class="carousel-control right" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>





            </div>

        </div>
.scss code

.carousel-control.left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
    background-repeat: repeat-x;
    left: -169px;
}

.carousel-control.right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
    background-repeat: repeat-x;
    right: -169px;
}

.glyphicon-chevron-left:before {
    color: black;
}

.glyphicon-chevron-right:before {
    color: black;
}



.custom-box {
    background: #FFFFFF;
    border: 1px solid #DCDBD7;
    margin: 30px 0;

    padding: 0px -1px 35px;
    text-align: center;
    min-height: 35rem;
}

.custom-box img {
    width: 100%;
    height: 15vw;
}

.custom-box h5 {
       font-size: 20px;
    color: #2D373C;
    letter-spacing: 0;
    line-height: 20px;
}

.cs {

    color: #2D373C;
    letter-spacing: 0;
    line-height: 20px;
}

下面是我的堆栈闪电网址

https://stackblitz.com/edit/angular-f2hx6b

注意：由于stackblitz不能正确支持jquery的angular，所以只有代码可供参考，请检查视频