Componentes compartidos en monorepo Angular

Contenido del curso

Fundamentos del Monorepo con Nx

Creación de Estructura del Monorepo

Desarrollo de Funcionalidades

Calidad y Optimización

Herramientas Avanzadas de NX

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:12

Componentes compartidos en monorepo Angular

Curso de Monorepositorios con NX

Clase 9 de 17

Clase 9 / 17

Recursos

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.

Resumen

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

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

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

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.

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

Fundamentos del Monorepo con Nx

Monorepo con Nx para Angular y Node

Monorepo con Nx: ventajas y cuándo usarlo

Instalación de entorno de desarrollo para Angular y Nx

Creación de workspace Nx con GitHub y Nx Cloud

Configuración básica del workspace de Nx con Angular

Creación de Estructura del Monorepo

Creación de aplicaciones Angular en monorepo Nx

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

Integración de Node.js en monorepos con Nx

Componentes compartidos en monorepo Angular

Desarrollo de Funcionalidades

Servidor Node.js en memoria con NX y Postman

App Angular con componentes compartidos en NX

Dos apps Angular compartiendo componentes en Nx

Calidad y Optimización

Tests unitarios en monorepo con Nx

Análisis estático con Linter en proyectos Nx y Angular 17

Cómo conectar tu monorepo a Nx Cloud

Herramientas Avanzadas de NX

Tags y constraints en monorepos con Nx

GitHub Actions con Nx en tu monorepo

Componentes compartidos en monorepo Angular

Progreso del curso

Fundamentos del Monorepo con Nx

Creación de Estructura del Monorepo

Desarrollo de Funcionalidades

Calidad y Optimización

Herramientas Avanzadas de NX

Recursos

Recursos