Una de las funcionalidades básicas de cualquier aplicación es poder incorporar librerías externas, para no tener que andar reinventando la rueda. En el ecosistema de Intternet existen gran cantidad de librerías que podemos usar para nuestros trabajos de frontend. Evidentemente Angular 5 no tendría ningún sentido si no pudiéramos incorporar librerías externas de otros fabricantes.

Por supuesto, siempre recurriremos a librerías, digámoslo así, «serias», es decir, respaldadas por fabricantes de primera línea o por un amplio sector de la comunidad de desarrolladores. Y esto, por una buena razón. No tiene sentido que usemos una librería que no tiene apoyo, que no está documentada, o cuyo autor puede dejar de dar soporte en cualquier momento. Eso podría afectar a la mantenibilidad de nuestr aplicación en el tiempo.

Al margen de la consideración anterior (que, por otro lado es de cajón), Angular nos permite incluir (y usar en nuestra aplicación) cualquier librería CSS o JavaScript del mercado.

PREPARANDO EL ESCENARIO

En este artículo vamos a instalar Bootstrap y, para poder usar el JavaScript que incorpora, instalaremos también jQuery. Si bien en este artículo sólo vamos a mostrar un uso de ejemplo de los CSS de Bootstrap, dejaremos ya la aplicación preparada para cuando necesitemos el JavaScript. Además, así ya tendremos jQuery disponible, si nos hace falta para algún otro uso.

ATENCIÓN. Supongo que, a estas alturas, no hace falta que te lo recuerde, pero voy a hacerlo de todos modos. El nombre del framework CSS Bootstrap no tiene nada que ver con la propiedad bootstrap que aparece en la envolvente de los módulos, como es el caso de app.module.ts. Que ambos se llamen así es una mera coincidencia.

Para instalar jQuery, desde la terminal de VSC, y dentro del directorio de nuestra aplicación, tecleamos lo siguiente:

npm install jquery --save

Si quisiéramos instalarlo como dependencia de desarrollo la instrucción que teclearíamos sería:

npm install jquery --save-dev

Sin embargo, dado que estamos instalando una librería cuyas funcionalidades deben estar operativas, también, cuando despleguemos la aplicación para el cliente, no haremos esto último, sino que usaremos la primera instrucción, a fin que que jQuery esté disponible para desarrollo y producción. De hecho, en el contexto de un framework para desarrollo frontend, como es Angular, serán raras las ocassiones en que necesitemos librerías de terceros exclusivamente para desarrollo.

El siguiente paso es instalar Bootstrap. Lo haremos con la siguiente instrucción:

npm install bootstrap --save

Observarás que tu fichero package.json ha cambiado, para incluir la referencia a estas dos librerías. Su contenido queda ahora así:

Observa en las líneas resaltadas como aparecen los nombres de las dos librerías que acabamos de instalar.

Ahora ya tenemos las dos librerías disponibles, incorporadas a nuestra aplicación Angular. Sin embargo, aún tenemos que decirle al CLI dónde están ubicadas, para que pueda hacer uso de ellas. Ya hemos hablado anteriormente de esto, pero vamos a repetirlo, porque es un paso importante, y nos ayudará a interiorizarlo. Las librerías externas se incluyen en la carpeta node_modules, ya que han sido instaladas con npm. No obstante, el CLI, por defecto, no «sabe» donde debe buscarlas. Tenemos que decírselo en el fichero .angular-cli.json. En primer lugar, tenemos que añadir una referencia a los estilos CSS de Bootstrap. Para ello, tenemos que modificar la propiedad styles, cuyo aspecto original es el siguiente:

Debe quedar modificada así:

En este caso, hemos referenciado los estilos básicos de Bootstrap. Como esta librería incluye otros archivos de estilos, tales como temas, si queremos usarlos también en nuestra aplicación, deberemos referenciarlos también en la propiedad styles que, como ves, es una matriz.

Ahora vamos a referenciar jQuery, y el JavaScript de Bootstrap. Para ello buscamos la propiedad scripts, cuyo contenido por defecto es una matriz vacía, así:

Nosotros referenciaremos ambos contenidos JAvaScript, así:

Y ya está. Ya tenemos las librerías disponibles para toda nuestra aplicación Angular.

TOMANDO ATAJOS

El proceso anterior es conceptualmente muy simple y rápido, y nos permite integrar las librerías en nuestro proyecto. Hay otra manera más simple de hacerlo, que es integrándolas por CDN en el archivo index.html. Te quedaría así:

ATENCIÓN. Esta forma de incorporar librerías externas parece (y lo es) más simple y menos laboriosa que la primera que te he enseñado. No requiere de instalaciones con npm, ni modificar el .angular-cli.json, lo que parece que nos ahorra tiempo y trabajo. Sin embargo, para ser honestos, debo desaconsejártela encarecidamente, por las siguientes razones: En primer lugar, cuando descargas contenidos por CDN estás empleando la versión que el fabricante de estas librerías pone a tu disposición. en el caso de jQuery, por ejemplo, podría valerte. Sin embargo, existen otras librerías como Bootstrap, DataTables, etc que se pueden descargar de formas muy personalizadas. En el siguiente apartado de este artículo te voy a enseñar a integrar en tu aplicación Angular librerías que descargues con características personalizadas. Eso es algo que, con CDN, no siempre puedes hacer. Lo que hay en el CDN es la librería estándar que el fabricante ha puesto allí, y punto, te valga o no. La otra razón es que Angular está pensado para que todos los contenidos complementarios que usemos pasen por el .angular-cli.json. Aunque en teoría esta manera de integrar librerías de terceros funciona (y muchos tutoriales en Internet te enseñan únicamente este modo de hacerlo, por lo fácil, rápido y cómo que es), si lo haces así te puedes encontrar con algunos conflictos en determinados usos de las librerías. Sí, te funcionarán bien en la mayoría de las ocasiones pero, al no estar, realmente, integradas con Angular en la forma en que fue pensado por el fabricante, pueden darte problemas de ejecución en algunos casos. Observa que el fichero por defecto de estilos CSS (styles.css) que crea el propio Angular no está referenciado en el index.html, sino en .angular-cli.json.

INTEGRANDO LIBRERÍAS PERSONALIZADAS

En ocasiones tienes que incorporar a tu aplicación Angular una librería externa que descargues con características personalizadas. Vamos a ver un ejemplo muy claro de esto. Supongamos que, en tu aplicación Angular, quieres usar Bootsrap 3, en lugar de Bootstrap 4. Esto no es ninguna tontería. Existe todavía muchísimo código pensado para Bootstrap 3, muchos desarrolladores que no necesitan la versión 4 y emplean aún la 3 y, de hecho, el fabricante (Twitter, para más señas) sigue dándole soporte en su página oficial (al margen de que, ya hablaremos de ello, en Angular 5 deberíamos pensar más en bootstrap 3 que en la versión 4; como te digo, ya hablaremos de esto). En esta versión tienes una página para configurar Bootstrap cómo tú desees descargarlo, en https://getbootstrap.com/docs/3.3/customize/. Si descargas una versión personalizada, no puedes instalarla por CDN en el index.html, ni tampoco directamente con npm. Tienes que instalarla «a mano». La forma de hacerlo es la siguiente:

• Entras en la página que te he indicado, y personalizas tódos los detalles de tu Bootstrap. Después lo descargas con el botón Compile and Download que hay en la parte inferior de la página referida.
• En la carpeta node_modules de tu proyecto Angular creas un directorio llamado bootstrap y, dentro de este, otro llamado dist. Extraes el contenido del comprimido que te has descargado, y lo copias en node_modules/bootstrap/dist/.
• Referencias Bootstrap en package.json (tienes que hacerlo editando el fichero a mano, puesto que no has usado npm), incluyendo bootstrap, como hemos visto que nos quedaba en el primer apartado de este artículo.
• Referencias bootstrap en .angular-cli.json, tal como hemos visto anteriormente. Esto es algo que, de todos modos, también tienes que hacer editando manualmente el fichero.

Y ya está. Ya tienes tu versión personalizada en tu proyecto Angular.

USANDO LAS LIBRERÍAS EXTERNAS

Supongo que, hayas elegido el método que desees, querras ver el resultado. Queremos ver que podemos usar las librerías externas en nuestro proyecto Angular. Como ejemplo de uso vamos a modificar la cabecera de nuestras vistas (el componente HeaderComponent que aprendimos a crear en este artículo), de forma que se cree la cabecera usando el Jumbotron de Bootstrap (si no sabes lo que es el Jumbotron, es una clase específica que te permite crear un área con todo el ancho de la página, para el contenido de la cabecera; tienes un ejemplo en https://getbootstrap.com/docs/4.1/examples/jumbotron/). Nosotros vamos a crear un jumbotron personalizado, muy simple, pero que nos permitirá ver como Bootstrap está actuando en nuestro proyecto.

• En primer lugar, vamos a editar el archivo principal de estilos del proyecto Angular (src/styles.css) para dejarlo vacío, como se crea por defecto. Eliminamos así cualquier contenido que hayamos grabado en este archivo en el artículo anterior.
• Modificamos el código de header.component.css, simplificándolo mucho. Unicamente vamos establecer un color azul para el fondo de la cabecera (para sustituir el gris pálido que tiene el Jumbotron por defecto), y mantenemos el color rojo oscuro del rótulo h1, así:

• Editamos el archivo header.component.html añadiéndole, a la etiqueta <header> la clase jumbotron, así:

• Modificamos el archivo app.component.html que, como ya sabes, es el que crea el contenido de la vista que tenemos de momento. Lo que hacemos es modificar el rótulo h1 para añadirle la clase container-fluid de Bootstrap, así:

Y ya está. Inicializa tu servidor (npm start), y verás que la página se carga ahora con un aspecto que nos dice que la cabecera está usando el Jumbotron de Bootstrap, y la tipografía también es la que incluye Bootstrap, en lugar de la que emplea el navegador por defecto. Todo esto nos dice que Bootstrap ha quedado perfectamente integrado en nuesto proyecto Angular.

CONCLUYENDO

En este artículo hemos aprendido a integrar librerías externas en nuestro proyecto Angular. Por supuesto, apenas le hemso dado un uso mínimo a una de ellas, porque era de lo que se trataba, de ver que se pueden incorporar y que funcionan. Esto nos vendrá bien a la hora de hacer más cosas con la aplicación. Espero verte en el siguiente artículo, y seguir compartiendo esto contigo. Por ahora, puedes descargarte la aplicación, en su estado actual, en este enlace.

MUCHA ATENCIÓN. Como te he comentado anteriormente, las librerías externas se graban en la carpeta node_modules. Esta no está incluida en el comprimido que te descargas. Esto quiere decir que el fichero package.json, y el fichero .angular-cli.json están referenciando librerías externas que tú no tienes, por lo que no podrás compilar ni arrancar este proyecto Angular. La solución es fácil. Como las librerías externas están ya correctamente referenciadas, aunque no las tengas físicamente, teclea, en la consola de tu VSC el mandato siguiente: npm install Al cabo de unos minutos, todas las librerías externas referenciadas se habrán descargado e instalado, y ya puedes usar npm start. Verás que ahora tu aplicación sí funciona perfectamente. Recuerda este paso. Deberás tenerlo en cuenta cuando te descargues proyectos Angular con librerías de terceros.