localhost:4200 - Guía del puerto del servidor de desarrollo de Angular


Actualizado el 1 ago 2026

localhost:4200

Puerto del servidor de desarrollo de Angular

🅰️ Abrir localhost:4200

Accede a tu servidor de desarrollo de Angular con recarga automática

Localhost:4200 es el puerto por defecto del servidor de desarrollo de Angular, que usa en exclusiva Angular CLI para servir aplicaciones mientras desarrollas. «Localhost» es tu propio ordenador (normalmente la IP 127.0.0.1) y «4200» es el puerto característico de Angular. Si ves localhost:4200, estás ante una aplicación de Angular en modo desarrollo.

El equipo de Angular eligió el 4200 como puerto por defecto para evitar choques con otros puertos de desarrollo habituales. Angular CLI arranca ahí el servidor automáticamente al ejecutar ng serve, con recarga automática, reemplazo de módulos en caliente y una experiencia de desarrollo optimizada.

Acceder a localhost:4200 desde otros dispositivos

Si no consigues llegar a localhost:4200 desde otros dispositivos, seguramente sea porque estás en otra red. Usa un túnel de Pinggy para acceder desde cualquier sitio:

ssh -p 443 -R0:localhost:4200 free.pinggy.io

Este comando crea un túnel seguro que reenvía el tráfico de una URL pública a tu servidor de Angular en el puerto 4200, lo que te permite:

  • Compartir tu aplicación de Angular con compañeros o clientes
  • Probarla en el móvil sin estar en la misma red
  • Enseñar tu aplicación desde cualquier parte del mundo
  • Depurar errores en distintos dispositivos y navegadores

El túnel te da una URL pública que puedes compartir, de modo que tu aplicación en localhost:4200 queda accesible desde cualquier dispositivo con conexión.

Servicios y programas que usan el puerto 4200

El puerto 4200 se asocia sobre todo al desarrollo con Angular, aunque también lo usan herramientas de su ecosistema. Estas son las principales:

🅰️ Framework Angular

  • Angular CLI: puerto por defecto del servidor de desarrollo
  • Aplicaciones de Angular: aplicaciones de una sola página hechas con Angular
  • Angular Universal: desarrollo con renderizado en servidor
  • Nx Workspace: aplicaciones de Angular en monorepos Nx
  • AngularJS (heredado): aplicaciones antiguas de AngularJS

🛠️ Herramientas de desarrollo

  • Servidor de Angular CLI: el servidor de desarrollo principal
  • Webpack Dev Server: la herramienta de compilación que hay debajo
  • Storybook (configurado): entorno de desarrollo de componentes
  • Karma: el ejecutor de pruebas de Angular
  • Protractor (obsoleto): framework de pruebas de extremo a extremo

📱 Aplicaciones de Angular

  • Aplicaciones de una sola página: SPAs hechas con Angular
  • Aplicaciones web progresivas: PWAs con el service worker de Angular
  • Aplicaciones en TypeScript: el lenguaje por defecto de Angular
  • Aplicaciones empresariales: proyectos grandes hechos con Angular
  • Aplicaciones móviles: apps de Ionic con Angular

🎨 Librerías de interfaz

Cuando ejecutas ng serve en un proyecto de Angular, el servidor arranca automáticamente en el puerto 4200 y queda disponible en http://localhost:4200/. Ofrece recarga automática, reemplazo de módulos en caliente y compilaciones optimizadas para desarrollo.

Cómo resolver problemas con localhost:4200

Si no consigues acceder a localhost:4200, así puedes diagnosticar y solucionar los fallos más comunes:

🔍 Paso 1: comprueba que el servidor de Angular está en marcha

Acción: confirma que el servidor está activo y escuchando en el puerto 4200.

Cómo comprobarlo:

  • Arranca Angular: ng serve o npm start
  • Mira la terminal: busca el mensaje «Local: http://localhost:4200/»
  • Verifica Angular CLI: ng version
  • Revisa el directorio: asegúrate de estar dentro de un proyecto de Angular

🚫 Paso 2: resuelve los conflictos de puerto

Acción: asegúrate de que ninguna otra aplicación está usando el puerto 4200.

Cómo arreglarlo:

  • Localiza el proceso: lsof -i :4200 (Linux/macOS) o netstat -ano | findstr :4200 (Windows)
  • Párale: kill -9 <PID>
  • Usa otro puerto: ng serve --port 4201

🔧 Paso 3: corrige la configuración de Angular

Acción: resuelve los problemas de configuración o de dependencias del proyecto.

Cómo arreglarlo:

  • Instala las dependencias: npm install o yarn install
  • Revisa angular.json: comprueba la configuración del proyecto
  • Limpia la caché: ng build --delete-output-path

🌐 Paso 4: prueba la conexión

Acción: verifica que el servidor responde.

Cómo probarlo:

  • Navegador: abre http://localhost:4200
  • Terminal: curl http://localhost:4200
  • Acceso en red: usa ng serve --host 0.0.0.0 para permitir conexiones externas

Problemas habituales y sus soluciones

Estos son los fallos típicos con localhost:4200 y cómo resolverlos:

❌ Error «Port Already in Use»

Problema: otra aplicación está ocupando el puerto 4200.

Solución: localiza el proceso con lsof -i :4200, párale con kill -9 <PID> o usa otro puerto con ng serve --port 4201.

⚠️ No se encuentra Angular CLI

Problema: Angular CLI no está instalado o no está en el PATH.

Solución: instálalo globalmente con npm install -g @angular/cli y comprueba la instalación con ng version.

🔄 La recarga automática no funciona

Problema: los cambios en el código no refrescan el navegador.

Solución: revisa la consola del navegador, reinicia el servidor con ng serve o limpia la caché y refresca a mano.

🌐 No se puede acceder desde otros dispositivos

Problema: localhost:4200 solo funciona en tu propia máquina.

Solución: usa ng serve --host 0.0.0.0 para permitir el acceso en red y entra por tu IP, por ejemplo http://192.168.1.100:4200.

🐌 Compilaciones lentas

Problema: el servidor tarda mucho en compilar o recargar.

Solución: usa ng serve --aot=false para compilar más rápido, amplía la memoria de Node.js con --max_old_space_size=8192 u optimiza tus imports y dependencias.

🔧 Errores de compilación

Problema: errores de TypeScript o fallos al compilar el proyecto.

Solución: revisa los errores en la terminal, comprueba que las versiones de Angular y TypeScript son compatibles, ejecuta ng update o corrige los imports.

Resumen

  • Qué es: localhost:4200 es la dirección por defecto (IP 127.0.0.1, puerto 4200) del servidor de desarrollo de Angular.
  • Quién lo usa: desarrolladores de frontend que crean aplicaciones Angular, SPAs y aplicaciones web modernas con Angular CLI.
  • Resolución de problemas: comprueba si el servidor está corriendo, resuelve conflictos de puerto, corrige la configuración y prueba la conexión.
  • Soluciones habituales: arrancar el servidor, liberar el puerto, instalar dependencias o limpiar la caché de Angular.

🚀 Comandos rápidos

# Crear una aplicación nueva
ng new my-app && cd my-app

# Arrancar el servidor de desarrollo
ng serve

# Abrir la aplicación
open http://localhost:4200

Usa estos comandos para empezar rápido con Angular en localhost:4200

El puerto 4200 es la piedra angular del desarrollo con Angular y te da un servidor potente y eficiente. Tanto si creas tu primera aplicación como si desarrollas una solución empresarial compleja, localhost:4200 es donde empieza el camino y donde vas a exprimir las herramientas de Angular.