Crear librerías compartidas en Nx es una estrategia clave para escalar equipos y proyectos. Aquí verás cómo estructurar un monorepo con Angular, Type Script, Jest y Nx Graph para compartir componentes, servicios, modelos y utilidades entre múltiples aplicaciones.
¿Qué construimos con Nx para compartir código?
Se crean dos bibliotecas complementarias dentro de packages: ui/shared para componentes Angular y utils/common para utilidades puras en Type Script. Ambas quedan disponibles para todo el Nx Workspace y permiten reutilizar código sin duplicarlo.
¿Cómo generar una library Angular standalone?
- Ejecutar el generador: npx nx g, eligiendo Angular y opción library.
- Ubicarla en packages/ui/shared para componentes compartidos.
- Usar arquitectura standalone: sin módulos, componentes importables directamente.
- Aceptar Jest para pruebas unitarias. Se generan configs de Jest y Type Script, README y project.json.
- Revisar source/library: trae un ejemplo inicial que puede eliminarse para dejar solo componentes propios.
Lo esencial: ui/shared centraliza componentes reutilizables, con configuración de pruebas y tipado ya lista.
¿Qué incluye la configuración base?
- Soporte de Type Script: tipado y compilación listos.
- Jest habilitado: pruebas unitarias desde el inicio.
- Estructura estándar de Nx: project.json, tsconfig, jest config y README.
- Carpeta lib preparada para organizar componentes y piezas compartidas.
¿Cómo crear una librería Type Script común con Nx JS?
Se genera una biblioteca transversal para cualquier proyecto basado en Type Script: packages util/common (creada como utils/common). El objetivo: funciones, modelos y services que sirvan a Angular, React, Next JS u otros proyectos con Type Script.
¿Qué ventajas ofrece para múltiples proyectos?
- Generación con Nx JS: npx nx g usando la opción JS, pero con base Type Script.
- Bundler seleccionado: Type Script.
- Linter configurado: slint para asegurar calidad de código.
- Pruebas unitarias: Jest activado.
- Estructura en source/lib: un archivo Type Script simple para exportar utilidades.
Beneficio claro: utils/common evita duplicar lógica y modelos, y se integra en cualquier app del monorepo.
¿Cómo visualizar dependencias con Nx Graph?
Para entender el mapa de dependencias, usar npx nx graph. Inicialmente, no hay enlaces entre apps y librerías; al incorporar componentes compartidos, el grafo refleja las relaciones.
¿Qué pasos integran ui/share en las apps?
- Copiar el selector del componente de ui/share (por ejemplo, el mostrado como lib/ui/share) y pegarlo en el HTML de ambas aplicaciones.
- Agregar el import correspondiente en el archivo TS de cada app para incluir el componente.
- Abrir de nuevo el grafo con npx nx graph y activar show all projects: ahora se observan conexiones desde app uno y app dos hacia ui/share.
Lista rápida de habilidades y conceptos clave:
- Nx Workspace: organización monorepo para múltiples apps y librerías.
- npx nx g: comando para generar libraries y scaffolding.
- library Angular standalone: componentes sin módulos, más simple y flexible.
- ui/shared: componentes comunes de interfaz.
- utils/common: utilidades, modelos y servicios en Type Script.
- Jest: pruebas unitarias integradas.
- Type Script: tipado fuerte, base del bundler en la lib común.
- slint: linter para calidad de código.
- Nx Graph: visualización de dependencias entre proyectos.
¿Te gustaría que el próximo paso sea conectar utils/common a una app y ver cómo cambia el grafo? Comparte tus dudas o el caso que quieres resolver.
