0

Soy nuevo en esto ya que estoy empezando mi andadura en Angular.

Estoy creando un proyecto de Angular con la siguiente versión:

Angular CLI: 18.2.7
Node: 20.17.0
Package Manager: npm 10.8.3

He seguido la documentación para instalar Bootstrap en mi proyecto y consigo que los componentes tomen los estilos de Bootstrap, pero no consigo que me funcionen los componentes Acordeon, colapsables, etc... (en fin, que no me funciona todo lo que debería tener algun tipo de "movimiento")

En mi angular.json tengo lo siguiente

        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.js",
          "node_modules/@popperjs/core/dist/umd/popper.min.js"
        ]

En el package.json

"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",

En styles.css del Index

@import "bootstrap/dist/css/bootstrap.css";

En fin, que no doy con la tecla

¿alguna sugerencia?

Perdón si la pregunta es muy básica pero es que estoy empezando con esto y no se por donde tirar

Gracias

1
  • Como experiencia personal, varias veces Boostrap en Angular no me ha funcionado de esta forma, así que siempre he terminado agregando como CDN. No se si tal vez sea alguna configuración de mi máquina, pero en Vue nunca tuve algún problema.
    – René
    Commented el 17 oct. a las 17:22

2 respuestas 2

1

Veo una diferencia potente, que puede ser el problema tuyo, el script es diferente a lo que encontré en una pequeña investigación de la instalación que me llevó a lo siguiente:

Instalar Bootstrap en el directorio de tu proyecto:

cd mi-proyecto
npm install bootstrap

Incluir el javascript bundle de bootstrap:

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Incluir Bootstrap en tu proyecto: (tu defines el orden)

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Luego agrega componentes de bootstrap, como un botón, y verifica:

<button type=”button” class=”btn btn-primary”>Test Button</button>

Recuerda hacer el serve de tu aplicación

ng serve
2
  • 1
    MUCHAS GRACIAS POR TU RESPUESTA. Me ha hecho revisar mi código y lo que me pasaba es que el javascript bundle de bootstrap no estaba puesto donde debía estar Commented el 18 oct. a las 6:29
  • @JUANJOGARCÍA Me alegro que te haya servido. Si puedes, marca la respuesta como la correcta, y me das +1, que me ayuda bastante en el sitio :3
    – Excorpion
    Commented el 18 oct. a las 11:43
0

por si a algún novato como yo lo necesita. Gracias a la respuesta de @Excorpion he revisado mi código y tenía el Script en un lado incorrecto, o mas bien faltaba donde debería estar

En mi angular.json hay dos etiquetas Script. Bien, pues solo había puesto el "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" en la segunda, dejando la primera vacía

Muchas gracias.

Ahora a seguir aprendiendo

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.