1

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">&times;</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.

1 respuesta 1

2

Si estas usando bootstrap 5 cambia todos los atributos data- por data-bs- porque es uno de los cambios descritos en la migración desde anteriores versiones de bootstrap.

En la sección de Javascript de su página encontrarás el cambio

Si no lo haces no solo los modales no te van a funcionar, sino tampoco los dropdowns, etc.

Una pregunta parecida la respondí aquí y aquí, donde pasaba lo mismo pero en distinto contexto.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.