Раскрывающийся список работает на отдельной HTML-странице, но не работает в компоненте Angular

Question

Я написал простой код для небольшого выпадающего списка,

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="btn-group" _ngcontent-c9="" dropdown="">
    <button class="btn btn-light" type="button" _ngcontent-c9="">Action</button>
    <button class="btn btn-light dropdown-toggle dropdown-toggle-split" aria-expanded="false" type="button" data-toggle="dropdown" _ngcontent-c9="">
        <span class="caret" _ngcontent-c9=""></span>
    </button>

    <ul class="dropdown-menu">
        <li><a href="#">abcd</a></li>
        <li><a href="#">efgh</a></li>

    </ul>
</div>

угловой компонент: https://angular -kayp63.stackblitz.io Это работает, если я его вставлюотдельная HTML-страница, но она не будет работать, если я добавлю ее в созданный мной компонент Angular. Почему?

Answer 1

Если вы используете библиотеки извне, вы должны импортировать их в основной файл index.html. Вероятно, вы импортируете бутстрап и jquery в неправильном месте. Я сделал StackBlitz, и ваш код работает правильно.

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