Angular: 7. Descargar las librerías de Bootstrap para utilizarlas en local

En una entrada anterior utilizamos Bootstrap en nuestro proyecto a través de imports desde nuestro "index.html". Este uso es correcto, pero también podemos descargar las librerías a nuestro proyecto y que éste tire de ellas, en lugar de utilizar las de la web. Esta es la manera:

La instalación se lleva a cabo a través de la consola de comandos. Como cuando hicimos los imports, debemos descargar tanto el CSS y el JavaScript de Bootstrap, como el JavaScript de JQuery y Popper.

Abrimos la consola de comandos, nos situamos en nuestro proyecto, y ejecutamos el comando "npm install bootstrap --save". Éste comando nos instalará el CSS y el JavaScript de Bootstrap:

Como se puede comprobar, en mi caso me lo instaló pero dio problemas con 12 vulnerabilidades. Aún así, instalé el JQuery con el comando "npm install jquery --save":

Me lo instaló correctamente pero me seguía indicando el problema de las vulnerabilidades, así que ejecuté el comando que me sugería la consola para arreglarlo "npm audit fix":

Esto tampoco me arregló las vulnerabilidades, así que ejecuté el comando que me sugería esta vez la consola "npm audit fix --force":

Con esto parece que sí se arreglaron los problemas.

Ejecuté el comando que faltaba, el de la instalación del JavaScript de Popper:

Se instaló correctamente. Aún así, para comprobarlo manualmente, nos podemos ir al directorio de nuestro proyecto, y abrimos la carpeta "node_modules", en la que debería haber una carpeta llamada "bootstrap", otra llamada "jquery", y otra llamada "popper.js". En la siguiente captura sólo muestro la "popper.js", pero están las tres:

Por último, para que nuestro proyecto utilice las librerías, debemos indicarlo en el fichero "angular.json". Debemos colocar, en el apartado de "styles", el CSS de Bootstrap, y en el apartado de "scripts", los JavaScripts de Bootstrap, JQuery y Popper.

Recordar que los Javascripts hay que indicarlos siempre en el orden: JQuery, Popper, y Bootstrap, para que no de problemas de dependencias.

El fichero queda como sigue:

Cada vez que se modifique el fichero "angular.json" hay que tirar y levantar de nuevo el servidor para que se actualicen los cambios.

Recordar también que si instalamos Bootstrap de esta manera, no es necesario utilizar imports en los ficheros .html, ya que la aplicación los cogerá y utilizará automáticamente.