Librerías compartidas en Nx: Angular y TypeScript para múltiples apps

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.