Contenido del curso
0:00/6:21
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ásUn código confiable no se logra solo con pruebas unitarias: un buen flujo incluye un análisis estático con un linter. Aquí verás cómo se ejecuta el Lint en proyectos con Nx, qué errores típicos aparecen y cómo se corrigen con prácticas actuales de Angular 17 y TypeScript para asegurar calidad y facilitar la integración continua con GitHub Actions.
¿Qué es un linter y por qué mejora tu código?
Un linter revisa el código fuente en busca de errores, problemas de estilo, malas prácticas y posibles bugs. El objetivo es claro: garantizar que el código esté escrito según buenas prácticas y evitar sorpresas en producción. Si ya tienes pruebas unitarias pasando, el siguiente paso es asegurar consistencia y tipado con Lint.
any que omite validaciones de TypeScript.inject en Angular 17.lib.¿Cómo correr el lint con Nx en todos los proyectos?
Para un proyecto puntual, se ejecuta en la terminal poniendo siempre npx primero. Al correrlo, verás warnings y errores que debes corregir antes de continuar. Si hay un solo error, el Lint falla.
npx nx lint app uno
Para correrlo en todos los proyectos, se usa npx nx run many y se indica que el target es Lint. Así, recorre todos los proyectos configurados y muestra qué falla para corregirlo en serie.
npx nx run many
¿Qué errores detectó y cómo se corrigieron?
Los errores se repiten y siguen un patrón. Al corregirlos uno por uno, el Lint termina pasando en todos los proyectos.
¿Cuándo usar inject en Angular 17?
En versiones nuevas, se reemplaza el constructor por inject para inyección de dependencias. Esto moderniza el código y evita patrones obsoletos.
// Antes class MiComponente { constructor(private servicio: TipoDeServicio) {} } // Después class MiComponente { private servicio = inject(TipoDeServicio); }
¿Por qué evitar any en TypeScript?
El uso de any saltea validaciones de TypeScript. Se debe especificar el tipo exacto en spec y en archivos TS para que el linter no falle y el tipado ayude de verdad.
// Antes let servicio: any; // Después let servicio: TipoDeServicio; // Ajuste de tipo cuando puede ser indefinido let valor: unknown;
¿Cómo estandarizar componentes compartidos con lib?
En bibliotecas compartidas, los componentes llevan el prefijo lib. Esto exige actualizar todos los usos en HTML.
<!-- Antes --> <mi-componente-compartido></mi-componente-compartido> <!-- Después --> <lib-mi-componente-compartido></lib-mi-componente-compartido>
Además, se aplicaron otras correcciones recurrentes:
new user ID no utilizado. Se borra.button click para botones. Se corrige donde aplique.Tras seguir estas instrucciones y volver a ejecutar el Lint, todo pasó correctamente. Con pruebas unitarias y linting en verde, se habilita una integración continua fluida con GitHub Actions para que, ante un merge o disparador, el pipeline confirme que todo está ok.
¿Te quedó alguna duda o quieres compartir tu experiencia corrigiendo any, migrando a inject o estandarizando lib en tu monorepo con Nx? Comenta y sigamos la conversación.
Gildder Guerrero Ramirez
Cristian Acalo
El curso se centra en gestionar proyectos con monorepositorios usando NX, creando un workspace con Angular y Node.js. Se aborda la importancia del análisis estático mediante herramientas como Linter, que ayudan a detectar errores y malas prácticas en el código. Se enseña a ejecutar Linter en aplicaciones y cómo corregir errores comunes, garantizando un código más limpio y optimizado. El objetivo es mejorar la colaboración en equipo y acelerar el desarrollo a través de prácticas de calidad y automatización en el flujo de trabajo.
✨🦄Análisis estático
Si ya se tiene eslint configurado en los proyectos, o si se eligió como configuración de inicio para todas las aplicaciones, es posible realizar el análisis estático de las mismas. Para ello se usa el comando:
npx nx lint [nombre de la aplicacion]
Si se desea realizar análisis de todos los proyectos se usa el comando:
npx nx run-many --target=lint --all