Creación de aplicaciones Angular en monorepo Nx

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:0010:02

Creación de aplicaciones Angular en monorepo Nx

Curso de Monorepositorios con NX

Clase 6 de 17

Clase 6 / 17

Recursos

Integra de forma práctica dos aplicaciones Angular en el ecosistema Next/Nx y aprende a servirlas sin conflictos de puertos. Aquí verás el comando clave, las opciones seleccionadas (standalone, routing, estilo CSS, tests con Jest, sin server side rendering), los cambios de configuración global que hace Nx y cómo usar Nx console con caché de Nx Cloud para levantar más rápido.

¿Cómo crear aplicaciones Angular en Next con Nx?

Para comenzar, se agrega la primera app dentro de packages y se aprovecha el paquete de Angular para Next/Nx. La creación se realiza desde la terminal apuntando a packages/app1 y el generador guía con preguntas interactivas.

¿Qué comando npx nx generate usar?

Ejecuta el generador para una aplicación Angular y define la ruta dentro de packages:

npx nx g nx angular:application packages/app1

¿Qué opciones de configuración elegir?

Standalone: sí, usando Angular 20 sin sistema de módulos.
Routing: activado.
Estilo: CSS.
Test unitario: Jest.
Test end-to-end: no.
Builder: "as build".
Server side rendering: no.

¿Qué cambia en la configuración del workspace?

Tras crear la primera app, Nx reacomoda el proyecto global de Next:

Configuración general de TypeScript y presets de Jest para todo el workspace.
Actualizaciones en JSONs y en package.json.
Instalación de dependencias de Angular, TypeScript, Jest y "Piter" para formato.

Clave: el monorepo se adapta automáticamente al agregar proyectos de distintas tecnologías, facilitando el trabajo en conjunto.

¿Cómo es la estructura de cada app y cómo servirla con Nx console?

Dentro de packages/app1 verás una app Angular estándar, pero con configuraciones delegadas al nivel global de Next/Nx.

¿Qué archivos y carpetas importan?

Sin package.json interno: se usa un project.json (equivalente a un Angular JSON, delegando al root).
Jest config y TS config específicos del proyecto.
Carpeta public con el ícono del proyecto.
Carpeta src con index, main y la carpeta app con el componente de bienvenida.
El HTML mostrado corresponde al componente de "welcome" y puede eliminarse para dejar la app limpia.

¿Cómo servir con Nx console y verificar puertos?

Abre Nx console y ejecuta el target serve de la app.
Se sirve en localhost 4200 y abre la aplicación con formato de Next.
Al crear una segunda app (packages/app2) el proceso es más rápido: Jest ya queda preseleccionado y se repiten opciones (sin SSR, etc.).
Al servir ambas, puede surgir conflicto por el puerto 4200. Nx Cloud acelera el arranque gracias al caché, y si el puerto está en uso, ofrece uno aleatorio.

Recomendación: evita puertos aleatorios y controla cada puerto por proyecto.

¿Cómo configurar puertos personalizados en project.json para evitar conflictos?

Configura el puerto en el target serve de cada app dentro de su project.json. Así, app1 usa 4200 y app2 usa 4201.

{
  "targets": {
    "serve": {
      "executor": "@nx/angular:webpack-dev-server",
      "options": {
        "port": 4200
      }
    }
  }
}

{
  "targets": {
    "serve": {
      "executor": "@nx/angular:webpack-dev-server",
      "options": {
        "port": 4201
      }
    }
  }
}

Edita el project.json de app1: define options.port en 4200.
Edita el project.json de app2: define options.port en 4201.
Sirve ambas desde Nx console: se levantarán rápido gracias a Nx Cloud y sin conflictos.

Ventaja del monorepo: con dos apps activas podrás crear librerías, componentes y servicios compartidos para mantener el código en un solo lugar y ahorrar líneas.

¿Te gustaría que mostremos cómo sumar un proyecto de Node.js o crear componentes compartidos paso a paso? Deja tu comentario con tus dudas o próximos temas que te interesen.

Resumen

¿Cómo crear aplicaciones Angular en Next con Nx?

¿Qué comando npx nx generate usar?

Ejecuta el generador para una aplicación Angular y define la ruta dentro de packages:

npx nx g nx angular:application packages/app1

¿Qué opciones de configuración elegir?

Standalone: sí, usando Angular 20 sin sistema de módulos.
Routing: activado.
Estilo: CSS.
Test unitario: Jest.
Test end-to-end: no.
Builder: "as build".
Server side rendering: no.

¿Qué cambia en la configuración del workspace?

Tras crear la primera app, Nx reacomoda el proyecto global de Next:

Configuración general de TypeScript y presets de Jest para todo el workspace.
Actualizaciones en JSONs y en package.json.
Instalación de dependencias de Angular, TypeScript, Jest y "Piter" para formato.

Clave: el monorepo se adapta automáticamente al agregar proyectos de distintas tecnologías, facilitando el trabajo en conjunto.

¿Cómo es la estructura de cada app y cómo servirla con Nx console?

Dentro de packages/app1 verás una app Angular estándar, pero con configuraciones delegadas al nivel global de Next/Nx.

¿Qué archivos y carpetas importan?

Sin package.json interno: se usa un project.json (equivalente a un Angular JSON, delegando al root).
Jest config y TS config específicos del proyecto.
Carpeta public con el ícono del proyecto.
Carpeta src con index, main y la carpeta app con el componente de bienvenida.
El HTML mostrado corresponde al componente de "welcome" y puede eliminarse para dejar la app limpia.

¿Cómo servir con Nx console y verificar puertos?

Abre Nx console y ejecuta el target serve de la app.
Se sirve en localhost 4200 y abre la aplicación con formato de Next.
Al crear una segunda app (packages/app2) el proceso es más rápido: Jest ya queda preseleccionado y se repiten opciones (sin SSR, etc.).
Al servir ambas, puede surgir conflicto por el puerto 4200. Nx Cloud acelera el arranque gracias al caché, y si el puerto está en uso, ofrece uno aleatorio.

Recomendación: evita puertos aleatorios y controla cada puerto por proyecto.

¿Cómo configurar puertos personalizados en project.json para evitar conflictos?

Configura el puerto en el target serve de cada app dentro de su project.json. Así, app1 usa 4200 y app2 usa 4201.

{
  "targets": {
    "serve": {
      "executor": "@nx/angular:webpack-dev-server",
      "options": {
        "port": 4200
      }
    }
  }
}

{
  "targets": {
    "serve": {
      "executor": "@nx/angular:webpack-dev-server",
      "options": {
        "port": 4201
      }
    }
  }
}

Edita el project.json de app1: define options.port en 4200.
Edita el project.json de app2: define options.port en 4201.
Sirve ambas desde Nx console: se levantarán rápido gracias a Nx Cloud y sin conflictos.

Ventaja del monorepo: con dos apps activas podrás crear librerías, componentes y servicios compartidos para mantener el código en un solo lugar y ahorrar líneas.

¿Te gustaría que mostremos cómo sumar un proyecto de Node.js o crear componentes compartidos paso a paso? Deja tu comentario con tus dudas o próximos temas que te interesen.

Gersom Hernandez

Hace 7 meses

Si alguien tiene problemas en con el comando y les da este error:

The "@nx/angular:application" generator doesn't support the existing TypeScript setup

The Angular framework doesn't support a TypeScript setup with project references. See `` for more details.

You can ignore this error, at your own risk, by setting the "NX_IGNORE_UNSUPPORTED_TS_SETUP" environment variable to "true".

Hay que modificar el archivo tsconfig.base.json y cambiar las propiedades de true a false

"composite": false, "declarationMap": false, "emitDeclarationOnly": false,

El generador de Angular detecta que la configuración base está preparada para el modo "Project References" (o Composite Projects) de TypeScript, lo cual es incompatible con el compilador de Angular (ngc).

Comentarios (5)5 comentarios

Israel Herrera

Hace un año

Es muy interesante Nx, solo que estoy aplicando en lugar de Angular, uso react con Next js. Para eso instalo:

nx add @nx/react y nx add @nx/next

y luego creo la aplicacion asi:

nx g @nx/next:app packages/store-app pero no logro que la app no tenga package.json propio sino que sea el package.json del repositorio... algo estoy haciendo mal?

Gildder Guerrero Ramirez

En el video se utilizan varios comandos para crear aplicaciones Angular dentro de un monorepo NX. Aquí están los más destacados:

npx nx g @nrwl/angular:application app1 - Genera una nueva aplicación Angular llamada "app1".
Se configuran opciones como:
- Test unitario (Jest)
- No se utiliza testing end-to-end
- Builder configurado como "S Build"
- Desactivación de server-side rendering
Se repite el proceso para generar "app2" con configuración similar.

Estos comandos permiten añadir y configurar aplicaciones Angular eficientemente en un entorno NX.

Mathias Pereira

Habia visto ejemplos en otros lados y veia una carpeta app, esa carpeta en esta version es packages? o es algo que uno configura manualmente

Oscar Bravo

Hace un mes

Tuve la misma inquietud y le pregunté a la IA de Google y elegir entre la carpeta apps y/o la carpeta packages depende de los requerimientos de lo que necesitemos implementar.

Acá les comparto el link

Moisés Barrera

Hace 10 meses

Un curso bastante util la verdad y muy bien explicado, gracias sergio!

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

Creación de aplicaciones Angular en monorepo Nx

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