Contenido del curso
0:00/7:28
Monorepo con Nx para Angular y Node
01:41Monorepo con Nx: ventajas y cuándo usarlo
Suscríbete para ver másInstalación de entorno de desarrollo para Angular y Nx
Suscríbete para ver másCreación de workspace Nx con GitHub y Nx Cloud
Suscríbete para ver másConfiguración básica del workspace de Nx con Angular
Suscríbete para ver másCreación de aplicaciones Angular en monorepo Nx
Suscríbete para ver másLibrerías compartidas en Nx: Angular y TypeScript para múltiples apps
Suscríbete para ver másIntegración de Node.js en monorepos con Nx
Suscríbete para ver másComponentes compartidos en monorepo Angular
Suscríbete para ver másLa primera aplicación frontend en Angular dentro del monorepo NX integra componentes compartidos, modelos comunes y llamadas a una API REST en Node.js. Si trabajas con arquitecturas multi-app, aquí ves cómo se conectan las piezas en una plataforma de inscripción de estudiantes funcional.
¿Qué contiene la app uno dentro del monorepo NX?
La aplicación vive en packages/app1 y arranca desde app.html, donde encuentras la plataforma de estudiantes con un selector que define quién realiza la modificación. Desde ahí, navegas entre dos pantallas principales.
La sintaxis sigue las convenciones de Angular 17 en adelante, lo que te permite usar control flow moderno y signals donde corresponda [01:24].
¿Cómo se conectan los componentes compartidos con la API?
La app importa desde util-common tres piezas clave: ApiService, el modelo Student y los componentes UI. Esta inyección centralizada es lo que hace que el monorepo tenga sentido.
¿Qué es util-common en un monorepo NX? Es la librería compartida donde viven servicios, modelos e interfaces que cualquier app del monorepo puede consumir sin duplicar código.
En el ApiService encuentras el método getStudents, que devuelve un array de estudiantes haciendo un GET a localhost:3000/students. Esa URL está hardcodeada a propósito en esta etapa, pero más adelante se moverá a una variable de entorno para distinguir desarrollo de producción [03:42].
¿Por qué dejar errores intencionales para el Linter?
La inyección de dependencias se escribe con la sintaxis previa a Angular 17, no con la función inject() recomendada. Esto se hace a propósito para que, al correr el chequeo de Lint, aparezcan los errores y veas cómo corregirlos.
El Linter funciona como un chequeo estático del código y es una de las herramientas que NX integra de fábrica en su ecosistema.
¿Cómo levantar la app Angular y el server al mismo tiempo?
Desde NX Console necesitas correr ambos proyectos en orden, porque la app frontend depende del backend para obtener datos.
serve sobre el server, que se levanta en localhost:3000.serve sobre app1, que corre en localhost:4200.La velocidad de arranque es notable porque NX Cloud cachea tareas previas y reutiliza resultados [05:18].
¿Qué hace NX Cloud al levantar proyectos? Acelera builds y serves usando caché remota distribuida, evitando recompilar lo que no cambió.
¿Cómo se ve la reactividad entre componentes compartidos?
En la UI aparecen tres estudiantes precargados: Alice Cooper, Bob Dylan y Kunnel Om. Al cambiar de estudiante en el selector, las tarjetas y la tabla se actualizan al instante porque están suscritas a los cambios del estado.
Si inscribes a Alice Cooper en los tres cursos disponibles, el botón responde con un mensaje de éxito y deshabilita nuevas acciones. Al cancelar, por ejemplo, Fundamentos de Python desde mis inscripciones, la tarjeta vuelve a habilitarse en verde de inmediato.
Lo interesante: la suscripción a los cambios vive en el componente Angular, pero el botón compartido responde igual aunque sea externo. Esa es la prueba de que la arquitectura del monorepo está funcionando.
¿Qué elementos quedan compartidos entre apps?
ApiService y el modelo Student desde util-common.Esto significa que cualquier modificación en estos elementos impactará tanto en esta app como en la app de profesores que verás a continuación.
¿Por qué importa la interfaz Student como contrato compartido?
El modelo Student vive en util-common/models y define la forma de los datos que viajan entre el server Node.js y las apps Angular. Al ser una interfaz compartida, garantiza que todos los proyectos hablen el mismo idioma de tipos.
Cuando sumes la segunda aplicación Angular, vas a notar que muchos de estos recursos se repiten sin necesidad de duplicar archivos. Ese es el valor real de un monorepo bien estructurado.
¿Qué parte del flujo te gustaría refactorizar primero cuando aparezcan los errores del Linter? Cuéntalo en los comentarios.
Gildder Guerrero Ramirez
Gildder Guerrero Ramirez
El comportamiento en tiempo real, donde el botón para inscribirse se activa automáticamente al cancelar la inscripción, se explica mediante la suscripción a cambios en Angular. En la clase, se demostró que cuando se modifica el estado de los datos (como la inscripción a un curso), los componentes que dependen de esos datos se actualizan automáticamente, gracias a la reactividad de Angular. Este mecanismo permite que la interfaz refleje los cambios de manera instantánea, mejorando la experiencia del usuario.
La clase se centró en la construcción de una aplicación Angular utilizando componentes compartidos y un servidor Node.js. Se destacó la interacción con la API para gestionar estudiantes, mostrando cómo se pueden seleccionar, inscribir y desinscribir estudiantes en cursos. Se enfatizó el uso de NX para optimizar el desarrollo, incluyendo características como caché distribuido y flujos de CI/CD. La integración de componentes comunes fue clave para facilitar el desarrollo colaborativo y mantener un código limpio.