Angular es un framework de diseño de aplicaciones y una plataforma de desarrollo que permite crear aplicaciones web eficientes y sofisticadas. En este contexto, las librerías en Angular desempeñan un papel fundamental al proporcionar componentes reutilizables que facilitan la construcción de aplicaciones. Vamos a explorar qué son estas librerías y cómo aprovecharlas al máximo.
¿Qué son las Librerías en Angular?
Las librerías en Angular son conjuntos de componentes, servicios y otros recursos que se pueden reutilizar en diferentes proyectos. A diferencia de una aplicación completa, una librería no puede ejecutarse por sí sola, debe ser importada y utilizada dentro de una aplicación Angular existente. Veamos algunos puntos clave:
- Componentes reutilizables: Imagina una librería como una caja de herramientas que contiene piezas de código listas para usar en tus aplicaciones. Estos componentes pueden abordar problemas comunes, como la interfaz de usuario o la gestión de datos.
- Compartir funcionalidades: Las librerías pueden ser públicas y compartidas como paquetes de npm. Esto significa que otros desarrolladores pueden utilizarlas en sus proyectos. Al no ejecutarse de forma independiente, las librerías se integran en aplicaciones existentes.
- Extender las capacidades de Angular: Importar una librería en tu aplicación te permite ampliar las funcionalidades de Angular. Por ejemplo, puedes agregar formularios reactivos o convertir una aplicación en una PWA (Progressive Web App) mediante librerías específicas.
- Publicar librerías personalizadas: Los desarrolladores pueden crear sus propias librerías y publicarlas como paquetes de npm. Esto es especialmente útil cuando deseas reutilizar código en múltiples proyectos.
Beneficios de Crear Librerías Personalizadas
Aunque crear y mantener librerías puede requerir esfuerzo adicional, los beneficios son significativos:
- Reutilización de código: Puedes utilizar la misma funcionalidad en diferentes proyectos sin duplicar código. Esto mejora la eficiencia del desarrollo y reduce posibles errores.
- Mantenimiento simplificado: Si encuentras errores o necesitas mejoras, solo debes actualizar la librería en un solo lugar. Esto evita tener que corregir el mismo problema en múltiples aplicaciones.
- Colaboración y contribución: Compartir tu librería con otros desarrolladores contribuye al ecosistema de Angular. Además, puedes beneficiarte de las librerías creadas por la comunidad.
Creación de una Librería Angular
Para empezar, lo primero que tenemos que hacer es crear un nuevo proyecto Angular. En este caso, lo llamaremos “my-project”, para lo cual utilizamos el comando:
$ ng new my-project
Lea también: IVA 21% Excel
Una vez creado el proyecto, nos posicionamos en la raíz, y en la terminal escribimos lo siguiente. El CLI de Angular nos proporciona un comando para crear una librería:
$ ng generate library my-lib
Esto nos genera una librería localizada en “projects/my-lib”. Aquí es donde escribimos nuestra librería. En este ejemplo, solo usaremos un componente con su respectivo archivo de pruebas y el módulo, pero puedes generar directivas, servicios, etc. En nuestra librería, tenemos un archivo llamado public_api.ts, ahí es donde se encuentran todas las clases, componentes, directivas, etc., que nuestra librería va a compartir. Si agregamos algún otro archivo, como por ejemplo una interfaz que se va a compartir con el usuario que ocupe nuestra librería, la agregamos a nuestro public_api.ts. Los archivos que son de uso interno para la librería y que no serán compartidos con el usuario, simplemente no se agregan. En este caso, solo exportamos el módulo, ya que es el que contiene el componente a compartir.
Creación de un Espacio de Trabajo Multiprojeto
Como primer paso, creamos un espacio de trabajo multiproyecto para nuestra biblioteca y aplicación de demostración:
ng generate library ngx-ngrx-component-store-debug-tools
Lea también: Guía IVA reducido
A continuación, generamos una demo aplicación en el espacio de trabajo:
ng generate application demo
El generador hace las siguientes preguntas: ¿Desea añadir enrutamiento Angular? N ¿Qué formato de hoja de estilo desea utilizar? SCSS. Una vez completado el comando ng generate, encontramos dos nuevos directorios de proyecto en nuestro espacio de trabajo: el directorio projects/demo para la aplicación y el directorio projects/ngx-ngrx-component-store-debug-tools para la librería. El generador también instala algunos paquetes adicionales. Dentro de la carpeta de projects ya podemos apreciar la aplicación.
Implementación de la Librería
Tenemos un module, un component y un src/lib en el directorio src/lib de la biblioteca. Estos archivos son útiles para crear un componente o servicio reutilizable. La API pública de la librería se exporta a través del archivo src/public-api.ts, así que vamos a actualizarlo. Editamos el fichero header.module.ts para permitir a los usuarios de nuestra librería poder hacer uso del componente HeaderComponent, declarándolo en el array de «exports» y establecemos en el array de «providers» el servicio para poder hacer uso de él de forma interna. Nota importante: si estás usando una versión de Angular inferior a la 6 para tu librería es imprescindible que tanto el HTML como el CSS estén definidos de manera «inline».
Gestión de Dependencias
Nuestra librería tiene las siguientes dependencias: tslib (añadida por el generador, ya que es necesaria para que una librería Angular funcione), recursive-diff y rxjs. Como regla general, debemos añadir nuestras dependencias como una dependencia de pares. Sin embargo, los dos gestores de paquetes, npm y yarn, manejan las dependencias pares de forma diferente: npm las instala por defecto, mientras que yarn no.
Lea también: ¿Cómo localizar tus XML del SAT?
Dado que es muy poco probable que alguien utilice recursive-diff en una aplicación Angular, lo hemos añadido como dependencia al package.json, por lo que tanto npm como yarn instalarán este paquete automáticamente. En caso de que queramos añadir el paquete recursive-diff como dependencia de pares, las aplicaciones que utilicen nuestra librería tendrán que incluir el paquete recursive-diff en su fichero packages.json para que nuestra librería funcione. Añadimos el paquete rxjs como una dependencia de pares, ya que cada aplicación Angular utiliza rxjs, por lo que nuestra biblioteca puede utilizar el paquete rxjs instalado por la aplicación.
Transpilación y Construcción de la Librería
Una vez escrita nuestra librería, es hora de prepararla como librería genérica. El comando ng generate library nos crea un directorio en la cual podemos escribir una librería, pero solo es la preparación. Falta transpilarla para hacerla una librería un poco más profesional y compatible, y para eso nos vamos a apoyar de ng-packagr, que es un paquete que nos simplifica la creación/transpilación de librerías para Angular.
Instalamos ng-packagr:
$ npm install ng-packagr --save-dev
En nuestro package.json del proyecto root (my-project) creamos un nuevo script, que nos ayudará a transpilar nuestra librería usando ng-packagr. El nombre del script puede ser cualquiera; en este caso, yo le puse “build:lib” y apunta al archivo ng-package.json que es el que le indica dónde está la librería y cómo la va a transpilar. Ahora ejecutamos nuestro nuevo comando:
$ npm run build:lib
Esto generará una carpeta dist en el proyecto raíz (my-project) con la librería transpilada. Antes de transpilar la librería, recomiendo hacer algunas modificaciones en el package.json que se encuentra dentro de nuestra librería (projects/my-lib), indicando la descripción, repositorio, autor y todo lo necesario para subir una librería a NPM. Además, es importante crear el archivo LICENSE (ya sea que lo creen manual o desde el repositorio) y modificar el README.md indicando el uso de la librería. Vamos a modificar nuestro script (build:lib) para copiar el README.md y el archivo LICENSE en nuestra librería transpilada. Ahora nuestra librería transpilada con el archivo README.md y LICENSE se vería así. Nota: Como puedes darte cuenta, el proyecto raíz solo sirve como contenedor para generar nuestra librería.
Construimos nuestra librería usando el comando ng build ngx-ngrx-component-store-debug-tools, que construye la librería en el directorio dist/ngx-ngrx-component-store-debug-tools. Si la ruta ngx-ngrx-component-store-debug-tools en el archivo tsconfig.json apunta a la librería construida, tenemos que reconstruir la librería después de cada cambio en el código fuente. Sin embargo, podemos automatizar este proceso aplicando el comando ng build ngx-ngrx-component-store-debug-tools --watch, que reconstruye nuestra librería con los cambios en el código fuente automáticamente. Para instalar Angular es necesario tener instalado en tu sistema local NodeJs. El segundo requisito consiste en instalar un editor de texto o IDE de preferencia.
Preparación para Publicación
Editamos el fichero package.json para poner la propiedad private a false, ya que se quiere publicar en algún repositorio de npm ya sea público o privado, y añadimos en la sección de scrips un «task» de npm para ejecutar la herramienta de empaquetado. En Github se sube el proyecto completo (my-project), con el README.md que describe el uso de la librería, y es donde se encuentran los comandos y las dependencias para hacer el transpilado.
Publicación de la Librería en NPM
Para publicar en NPM, entramos a la carpeta dist que se generó al correr el comando npm run build:lib y luego entramos a la carpeta my-lib:
$ cd dist/my-lib
Esto es lo que se subirá a NPM. Una vez posicionado en la carpeta dist/my-lib, en nuestra terminal accedemos a nuestra cuenta de NPM:
$ npm login
Les pedirá las credenciales y hacemos la publicación de nuestro paquete:
$ npm publish
Nota: Recuerda que cada modificación a nuestro paquete hay que cambiar la versión del mismo. Antes de publicar la biblioteca, se había creado una cuenta npmjs.org. Se había configurado la autenticación de dos factores y había iniciado sesión en la línea de comandos utilizando el comando npm login. Luego de navegar al directorio dist/ngx-ngrx-component-store-debug-tools y publicar la librería usando el comando npm publish. En caso de que quieras actualizar la librería ya publicada, actualiza el número de versión del paquete en el archivo projects/ngx-ngrx-component-store-debug-tools/package.json, luego construye y publica el paquete.
Uso de la Librería en una Aplicación
Para poder utilizar la librería recién creada, es necesario importarla desde un proyecto tipo aplicación, que en este caso es demoApp. En el directorio /projects/demo/src/app/card, creamos un componente de tarjeta simple con un almacén de componentes, y usamos los decoradores de la librería. Y dentro del módulo principal de la aplicación o donde vayas a hacer uso de la librería, en la propiedad imports poner HeaderModule.forRoot() de forma que esos providers se añaden al injector principal de tu aplicación. Utilice el comando ng serve demo para ejecutar la aplicación de demostración. Aplicando esta configuración, si cambiamos el código fuente de la librería, la demo app recompilará automáticamente. Después de ejecutar ‘npm install -save my-lib-poc’ como puedo consumirlo?
Ejecutar la Aplicación de Demostración en StackBlitz
Cuando se intentó ejecutar el espacio de trabajo multi-proyecto, se presentaron los siguientes problemas: StackBlitz no maneja bien los espacios de trabajo multi-proyecto de Angular. La demo contiene TailwindCSS, pero los componentes dentro de la app se mostraban sin ningún estilo en StackBlitz. Para solucionar el primer problema (espacios de trabajo multi-proyecto), se creó un espacio de trabajo de un solo proyecto aplicando el comando ng new ngx-ngrx-component-store-debug-tools-demo, y se copió la aplicación de demostración del directorio project/demo/src en él. También puedes probar la aplicación demo en StackBlitz.