En este artículo vamos a combinar dos frameworks, como no tenemos bastante con aprender Angular (ironía modo on), lo vamos a combinar con Bootstrap.

Aunque os puedo asegurar que Bootstrap viene para facilitarnos la vida

Pero ¿Qué es Bootstrap?

A modo de resumen y para quién no haya trabajado anteriormente con Bootstrap, Bootstrap es un framework desarrollado por Twitter en el año 2010.

Bootstrap, combina el potencial de varias tecnologías: como son CSS y JavaScript (JS), JQuery, etc. Con la finalidad de dar estilos a nuestras páginas HTML y teniendo como nació con los propósitos de:

  • Estandarizar las herramientas de la compañía.
  • Hacer los sitios responsive (adaptados a desktop, tablets y smartphones)
  • Agilizar el proporcionar estilos de una forma rápida y sencilla.

Aunque, a lo largo del curso explicaremos como funciona, si alguien quiere indagar más en el tema, os dejo su página oficial: https://getbootstrap.com/

Distintas formas de instalar Boostrap en Angular

Existen distintas formas de trabajar con Bootstrap en nuestros proyectos de Angular y son las siguientes:

  • Usando Bootstrap desde un CDN
  • Descargando archivos Bootstrap y agregándolos a la src/assetscarpeta de su proyecto Angular.
  • Instalando Bootstrap desde NPM usando el npm installcomando.

Para explicarlas, vamos a suponer que tenéis Angular ya instalado y ser capaces de crear aplicaciones y arrancarlas sino os aconsejo mirar el siguiente artículo

Creando el proyecto de Angular

Manera 1 de trabajar con Bootstrap

Usando Bootstrap desde un CDN

Existe una forma de trabajar con Bootstrap sin necesidad de descargar el framework mediante a un servidor donde se alojan todos los archivos de Boostrap gracias a lo que se conoce como una CDN (Content Delivery Network o red de entrega de contenidos).

Obtenemos dicha CDN de bootstrap en su web oficial:

Para ello solamente tenemos que añadir este código por encima del resto de scripts del head del archivo index.html, que si os acordáis es el archivo general donde cargamos los componentes de angular:

  • Un <link> para agregar el bootstrap.cssarchivo en la <head>sección,
  • Un <script>script agregar el jquery.jsarchivo antes de la </body>etiqueta de cierre.
  • Un<script>etiqueta para agregar el bootstrap.jsarchivo antes de la </body>etiqueta.

Y copiamos un ejemplo de bootstrap:

Y lo añadimos sobre el template de nuestro componente por defecto:

El resultado será:

Si una vez este nuestro componente inicializado. Empiezo a trabajar con jQuery y verifico que tengamos el dom cargado y muestro un console log de ready. Y además de ello, añado un botón con un id al que asocio un evento click que arrojará también otro alert:

Podemos ver que se nos genera el error "Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i @types/jquery`.ts(2581)" al escribir los $:

Para solucionar esto, tenemos varias maneras vamos a explicar 2 formas de solventarlo:

  • El primer mecanismo para solventar esto es declarar la variable $ de la siguiente manera:

  • El segundo mecanismo para solventar esto podría ser instalar los type de jquery:

Pero si intentamos arrancar nuestra aplicación, podremos ver de esta forma nos aparece un error:

Para solucionarlo, simplemente añadimos a los types del archivo tsconfig.app.json “jquery” de la siguiente manera:

De cualquier de ambas maneras, podemos:

Y si hacemos click en el botón de Click me, podemos ver que nos aparece un mensaje por lo que ahora tenemos jQuery además de Bootstrap funcionando correctamente:

Manera 2 de trabajar con Bootstrap

Descargando archivos Bootstrap

Es necesario remover la configuración que hemos realizado anteriormente de Bootstrap (en el caso que la hayamos realizado) ya que si no nos sabremos con que versión de Bootstrap estamos trabajando y tampoco tiene sentido tener dos instalaciones.

Si vamos a https://getbootstrap.com/docs/4.5/getting-started/download/ podemos descargar los archivos de Bootstrap:

Estos archivos contiene lo mismo que anteriormente asociábamos mediante a la CDN:

Si los descomprimimos y los añadimos al directorio de assets, que si recordamos, contiene los ficheros estáticos de nuestro proyecto:

Ahora, añadimos los mismos ficheros con los que hemos trabajado anteriormente, aunque si recordáis antes teníamos 3 ficheros y ahora solamente tenemos 2:

Algunos componentes de Bootstrap requieren del uso de las librerías jQuery y, por tanto, si no la incluimos en nuestro proyecto, cualquier componente de Bootstrap que dependa de dicha librería no funcionará.

Nos falta descargar Jquery, para ello, vamos a su web oficial:

Descargamos el fichero:

Y lo añadimos en la carpeta assets tal y como hemos hecho anteriormente con  bootstrap:

Si tratamos de arrancar esto, nos aparecerá el siguiente mensaje:

Esto se produce a como ya vimos en la manera 1 de realizar la instalación hemos instalado npm i @type/jquery:

Para solucionarlo, simplemente añadimos a los types del archivo tsconfig.app.json “jquery” de la siguiente manera:

Si ahora cargamos nuestra aplicación nuevamente vemos que tenemos el mismo comportamiento que en la instalación de la manera 1:

Y si hacemos click en el botón de Click me, podemos ver que nos aparece un mensaje por lo que ahora tenemos jQuery además de Bootstrap funcionando correctamente:

Manera 3 de trabajar con Bootstrap

Instalando Bootstrap desde NPM

Es necesario remover la configuración que hemos realizado anteriormente de Bootstrap (en el caso que la hayamos realizado) ya que si no nos sabremos con que versión de Bootstrap estamos trabajando y tampoco tiene sentido tener dos instalaciones.

Bien, si vamos a angular.json dentro del proyecto que acabamos de crear, podemos ver que dentro de estilos como es normal (al no tenerlo instalado en el proyecto), no nos aparece Bootstrap. Y por tanto, solamente tenemos el archivo general de nuestro CSS:

De hecho, si vamos al fichero, package.json además podemos ver que no tenemos la dependencia instalada dentro de nuestro proyecto:

Para realizar la instalación de Bootstrap, al igual que como hicimos con la Angular, utilizamos NPM.

Antes de la versión 5 de NPMexistían dos maneras de instalar bootstrap con NPM:

  1. npm install bootstrap --save descarga la última versión de arranque y además añadirá la dependenciesen el package.jsonarchivo.
  2. npm install bootstrapdescargaría la última versión de bootstrap pero no la agregaría dependenciesen el package.jsonarchivo.

A partir de la versión 5 npm install boostrap y npm install boostrap --save desde la versión 5 de NPM son lo mismo. Ambos descargan la última versión de bootstrap y la instalaran en la subcarpeta './node_module'. Además, actualizará nuestro package.json agregando una entrada en las dependencias.

Dentro de la carpeta node_modules podemos ver que ahora tenemos la dependencia instalada junto al archivo bootstrap.css:

Y una vez instalado con NPM si vamos al archivo package.json podemos ver también se ha añadido la dependencia de bootstrap:

Una vez instalado, ahora solo nos falta indicarle a nuestro proyecto de Angular que vamos a trabajar con bootstrap y lo podemos hacer o bien así:

Si os fijáis, los archivos de CSS van dentro de styles y los de JS dentro de script. Es importante matizar que tenemos que estar situados dentro de build ya que hay otra carpeta similar llamada test donde NO tenemos que añadir nada por el momento.

Hasta ahora, hemos instalado Bootstrap, pero no jQuery, para instalar jQuery realizamos:

Si vamos al packge.json podemos ver que se acaba de añadir junto a bootstrap que acabamos de instalar:

Ahora, tenemos que repetir el proceso de añadir dicho JS en el fichero angular.json y lo pondremos en el mismo orden que en el CDN de la manera 1. Primero el jquery y posteriormente el bootstrap.js de la siguiente manera:

Y si intentamos arrancar nuestro proyecto otra vez con ng serve podemos ver que nos aparece un ya conocido error:

Pero ya sabemos solucionarlo, así que o escribimos declare var $: any en el componente:

O añadimos a los types del archivo tsconfig.app.json “jquery” dentro del array de types de la siguiente manera:

Otro mecanismo para cargar el archivo de CSS de bootstrap (NO LOS DE JS) es, en vez de situarlo dentro del directorio de styles del archivo angularj.json, importarlo dentro de nuestro archivo style.css.

Ya que, como podemos apreciar el archivo de angular.json es llamado dentro. Concretamente en el apartado de estilos (styles) y por tanto, es una alternativa para cargar nuestro Bootstrap:

Para escribir el gusanito (~) podemos usar alt + 126

Aunque es una alternativa válida y que realmente funciona, a mi me gusta más tener los archivos asociados en angular.json ya que tenerlos en un CSS provocará que sea más sencillo borrar dicha relación.

Si ahora cargamos nuestra aplicación nuevamente vemos que tenemos el mismo comportamiento que en la instalación de la manera 1 y 2:

Y si hacemos click en el botón de Click me, podemos ver que nos aparece un mensaje por lo que ahora tenemos jQuery además de Bootstrap funcionando correctamente:

Bien, esto es todo por hoy, ya sabéis como instalar BootStrap de la forma tradicional.

En un próximo artículo, ahora que ya conocemos las maneras más simples de instalar BootStrap, explicaremos las nuevas maneras de instalar Bootstrap. Ya que, actualmente, estás formas no son recomendables al 100 % y existen formas mejores (o más recomendadas) de combinar/trabajar con BootStrap sobre nuestras aplicaciones de Angular. Saludos