Tengo una aplicación en Angular 13 y estoy intentando usar un modal de bootstrap pero a la hora de activarlo no funciona, he intentado de todo, cree un proyecto nuevo y luego instale las librerías desde el principio pero sigue sin funcionar. Básicamente cuando lo activo este me ignora por completo como si el modal no existiera. Cabe de destacar que por un momento me estuvo funcionando pero de un momento a otro dejo de funcionar y estoy casi seguro de no haber tocado nada en el angular.json. Por la consola del navegador tampoco me da ningún error y la aplicación siempre se esta ejecutando con normalidad.
Modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Angular.json:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/ngx-toastr/toastr.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Antes el Angular.json estaba de esta manera pero tampoco funcionaba:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/ngx-toastr/toastr.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
Las versiones de las dependencias por si algo sirve:
"bootstrap": "^5.1.3",
"jquery": "^3.6.0",
"ngx-toastr": "^14.2.1",
"popper.js": "^1.16.1",
No se si el error es ocasionado por alguna de estas dependencias o por toda de ellas o incluso por otra cosa de la que aun no me he percatado.