Есть несколько вещей, которые вы пытались сделать одновременно.Во-первых, вам нужно интегрировать jQuery с typcript, а во-вторых, интеграцию модальной функциональности начальной загрузки, которая в конечном итоге зависит от jQuery.Давайте сначала интегрируем jQuery, а затем перейдем к начальной загрузке.
Установка jQuery: вы уже многое сделали здесь
npm install jquery --save
npm install @types/jquery --save
npm i bootstrap --save
Угловая конфигурация: введите jQuery и загрузчикздесь:
"styles":[
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts":[
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Настройка машинописного текста: добавьте эти строки вверху вашего компонента.
/// <reference path ="../../node_modules/@types/jquery/index.d.ts"/>
declare var $: any
ngOnInit() {
$('#myModal').modal('show');
}
HTML: добавьте модальный код здесь
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Modal</h4>
</div>
<div class="modal-body">
Modal content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
У меня естьпопробовал выше путь, и это работает для меня.Дайте мне знать, если вы все еще получаете ошибку.