La 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.

• Cursos disponibles, donde aparecen las tarjetas compartidas y los botones reutilizables.
• Mis inscripciones, que renderiza la tabla compartida con los cursos del estudiante activo.
• Selector de estudiantes, que cambia el contexto en tiempo real gracias a la suscripción a cambios.

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.

1. Ejecutar serve sobre el server, que se levanta en localhost:3000.
2. Ejecutar serve sobre app1, que corre en localhost:4200.
3. Abrir el navegador con control + click sobre la URL que aparece en consola.

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?

• La tarjeta de curso, reutilizada en cursos disponibles.
• El botón de acción, que dispara inscripción o cancelación.
• La tabla, presente en mis inscripciones.
• El 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.