Creación de aplicaciones Angular en monorepo Nx

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.