无法在Angular 5+生产版本中使用引导传送带

Question

在这里我正在使用bootstrap 3.3.7版本和angular 5版本，这里的问题是在我的本地版本中，bootstrap轮播正在运行，但是当我使用ng build --prod并生成prod版本时，轮播无法运行我的意思是它可以正常工作，但轮播卡已覆盖

请参考下面显示的网址

https://youtu.be/7cjbHgTsVjc

.html

<div class="container">
    <div class="row">
        <div class="col-xs-12" id="usecase">
            <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代码

.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;
}

下面是我的堆栈闪电战网址，不知道为什么我的轮播无法在stackblitz中工作

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