Reutilizar código entre múltiples aplicaciones Angular es uno de los grandes beneficios de trabajar con un monorepo. Aquí verás cómo estructurar bibliotecas compartidas dentro de la carpeta packages para centralizar componentes, modelos y servicios que consumirán dos aplicaciones distintas: una para inscripción de alumnos y otra para que profesores creen cursos.

Qué bibliotecas compartidas vas a construir en el monorepo

El proyecto se divide en dos paquetes con propósitos diferentes, pensados para maximizar la mantenibilidad y evitar duplicación de código.

• UiShared: contiene componentes Angular reutilizables como botón, tarjeta de curso y tabla.
• UtilsCommon: contiene modelos y servicios escritos en TypeScript puro, sin dependencia de Angular.

¿Para qué sirven las bibliotecas compartidas en un monorepo? Permiten que varias aplicaciones consuman el mismo código desde un único punto. Si necesitas cambiar un componente o un modelo, lo modificas una sola vez y el cambio se propaga a todas las apps que lo usan.

Qué componentes incluye UiShared

Esta biblioteca agrupa la interfaz de usuario que ambas aplicaciones Angular necesitan compartir. Tener estos componentes en un solo lugar te ahorra código y facilita el mantenimiento.

• Botón: soporta clic, cambio de color y variantes visuales.
• Tarjeta de curso: muestra título del curso, profesor y descripción.
• Tabla: incluye ordenamiento ascendente y descendente con flechas, y se reutiliza para listar cursos y alumnos.

Los tres componentes se exportan desde un archivo index.ts, lo que simplifica las importaciones desde cualquier app del monorepo.

Qué contiene UtilsCommon y por qué es agnóstico al framework

UtilsCommon está pensado como código puro de TypeScript, lo que significa que no depende de Angular. Si mañana sumas un proyecto en React o Next.js, puedes reutilizar exactamente los mismos modelos y servicios.

Dentro encontrarás tres bloques de modelos:

• Course: con interfaces distintas para crear un curso nuevo o para hacer un get.
• Enrollment: para crear o leer inscripciones de alumnos.
• Student: para representar a los estudiantes.

¿Qué diferencia hay entre UiShared y UtilsCommon? UiShared contiene componentes visuales de Angular. UtilsCommon contiene modelos y servicios en TypeScript puro, compatibles con cualquier framework basado en JavaScript.

Cómo se conectan los servicios compartidos con el backend

Dentro de UtilsCommon también vive la capa de servicios que consume la API REST. Aquí se definen los métodos GET, POST, PUT y DELETE que golpearán el servidor que construirás en Node.js.

El servicio ya apunta a localhost:3000, dirección que se mantendrá cuando levantes el server. Las rutas cubren tres recursos:

• Cursos.
• Estudiantes.
• Enrollments, es decir, las inscripciones.

Además, hay helpers en TypeScript que se encargan de mapear datos y que pueden usarse desde cualquier tecnología que importe la biblioteca.

Por qué centralizar modelos y servicios mejora la mantenibilidad

Cuando el front y el back comparten la misma definición de tipos, eliminas inconsistencias entre lo que envía el cliente y lo que espera el servidor. Un cambio en el modelo Course se refleja automáticamente en la app de inscripción, en la app de profesores y en el servicio que consulta la API.

Este patrón te da un punto de apoyo común entre Angular y Node.js, tratando al monorepo como un ecosistema donde front-end y back-end hablan el mismo idioma.

¿Puedo usar estas bibliotecas con un backend en Node.js? Sí. Como UtilsCommon está escrito en TypeScript puro, los modelos pueden importarse tanto desde Angular como desde tu servidor Node, garantizando contratos de datos coherentes.

Qué sigue después de configurar las bibliotecas compartidas

Con UiShared y UtilsCommon listos, ya tienes los tres pilares del proyecto en su lugar: los componentes visuales, los modelos de dominio y la capa de servicios que consumirá la API REST.

El siguiente paso será construir el servidor en Node.js y levantar las dos aplicaciones Angular para ver estas bibliotecas en acción. Si quieres seguir el avance commit por commit, encontrarás el código disponible en los recursos.

¿Cómo organizarías tú las bibliotecas compartidas si sumaras una tercera aplicación al monorepo? Cuéntame en los comentarios.