localhost:4200

http://localhost:4200

Port 4200 is the default development server port for Angular applications using Angular CLI. When you run ng serve, your Angular app starts on localhost:4200 with live reload and hot module replacement enabled.

→ Open localhost:4200

What Runs on Port 4200?

  • Angular CLI Development Server - Default port for ng serve
  • Angular Applications - Single-page applications (SPAs)
  • Angular Universal - Server-side rendering projects
  • Ionic Framework - Mobile app development (sometimes uses 4200)
  • NativeScript Angular - Cross-platform mobile apps

Start Angular Development Server

Basic ng serve Command

# Start Angular development server ng serve # Server starts at http://localhost:4200 # Browser opens automatically # Live reload enabled - changes refresh instantly # Compilation happens on file save # Server output shows: # ** Angular Live Development Server is listening on localhost:4200 ** # Compiled successfully

Create New Angular Project

# Install Angular CLI globally npm install -g @angular/cli # Check Angular CLI version ng version # Create new Angular project ng new my-angular-app # Navigate to project directory cd my-angular-app # Start development server ng serve # Access at: http://localhost:4200

ng serve Options

# Start server (default port 4200) ng serve # Open browser automatically ng serve --open ng serve -o # Use specific port ng serve --port 4201 # Listen on all network interfaces ng serve --host 0.0.0.0 # Enable HTTPS ng serve --ssl # Disable live reload ng serve --live-reload false # Production build in dev server ng serve --configuration production # Verbose output ng serve --verbose

Change Angular Port from 4200

Temporary Port Change

# Run on different port ng serve --port 4201 ng serve --port 8080 ng serve --port 3000 # Shorthand ng serve -p 4201

Permanent Port Change in angular.json

// angular.json { "projects": { "your-project-name": { "architect": { "serve": { "options": { "port": 4201 } } } } } } // Now ng serve will always use port 4201

Set Port in package.json Scripts

// package.json { "scripts": { "start": "ng serve", "start:4201": "ng serve --port 4201", "start:prod": "ng serve --configuration production" } } // Run with: npm run start:4201

Fix "Port 4200 is Already in Use"

Error: Port 4200 is already in use

Another Angular dev server or process is using port 4200.

  • Another Angular project running
  • Previous ng serve didn't shut down properly
  • Zombie Node.js process on port 4200
  • Different application using port 4200
  • VS Code terminal not fully closed

Solutions

  • Press Ctrl+C in terminal to stop Angular server
  • Use different port: ng serve --port 4201
  • Kill process using port 4200
  • Restart IDE or terminal
  • Reboot computer if persistent

Find and Kill Process on Port 4200

Windows

# Find process using port 4200 netstat -ano | findstr :4200 # Output shows PID (last column) # TCP 0.0.0.0:4200 0.0.0.0:0 LISTENING 12345 # Kill process by PID taskkill /PID 12345 /F # Kill all node processes (use with caution) taskkill /IM node.exe /F # Check if port is free netstat -ano | findstr :4200

Linux/Mac

# Find process on port 4200 lsof -i :4200 sudo lsof -i :4200 # Kill process directly lsof -ti:4200 | xargs kill -9 sudo lsof -ti:4200 | xargs kill -9 # Alternative with fuser sudo fuser -k 4200/tcp # Using npx kill-port npx kill-port 4200

Check if Port 4200 is in Use

# Windows netstat -ano | findstr :4200 # Linux/Mac lsof -i :4200 netstat -an | grep 4200 ss -tulpn | grep 4200 # Check all listening ports netstat -an | grep LISTEN # Windows PowerShell Test-NetConnection -ComputerName localhost -Port 4200

Angular Development Server Features

  • Live Reload - Automatically reloads browser when files change
  • Hot Module Replacement (HMR) - Updates code without full reload
  • On-the-fly Compilation - TypeScript compiled to JavaScript instantly
  • Error Overlay - Shows compilation errors in browser
  • Source Maps - Debug TypeScript in browser DevTools
  • Lazy Loading - Loads modules on demand
  • Webpack Dev Server - Built on webpack-dev-server

Enable HTTPS on Angular Dev Server

# Enable HTTPS ng serve --ssl # Use custom SSL certificate ng serve --ssl --ssl-cert path/to/cert.pem --ssl-key path/to/key.pem # Access at: https://localhost:4200 # Browser will show certificate warning (normal for self-signed) # Click "Advanced" and "Proceed to localhost"

Configure SSL in angular.json

// angular.json { "projects": { "your-project": { "architect": { "serve": { "options": { "ssl": true, "sslCert": "ssl/server.crt", "sslKey": "ssl/server.key" } } } } } } // Run: ng serve // HTTPS enabled automatically

Access Angular App from Other Devices

# Allow network access ng serve --host 0.0.0.0 # Or specify host IP ng serve --host 192.168.1.100 # Find your IP address # Windows ipconfig # Linux/Mac ifconfig ip addr show # Access from phone/tablet on same network # http://192.168.1.100:4200

Configure Host in angular.json

// angular.json { "projects": { "your-project": { "architect": { "serve": { "options": { "host": "0.0.0.0", "port": 4200 } } } } } }

Angular Proxy Configuration

Proxy API requests to backend server to avoid CORS issues:

Create proxy.conf.json

// proxy.conf.json { "/api": { "target": "http://localhost:3000", "secure": false, "changeOrigin": true } } // Start with proxy ng serve --proxy-config proxy.conf.json // API requests to /api/* will be proxied to http://localhost:3000/api/*

Configure Proxy in angular.json

// angular.json { "projects": { "your-project": { "architect": { "serve": { "options": { "proxyConfig": "proxy.conf.json" } } } } } } // Now ng serve uses proxy automatically

Advanced Proxy Configuration

// proxy.conf.js module.exports = { "/api": { "target": "http://localhost:3000", "secure": false, "logLevel": "debug", "changeOrigin": true, "pathRewrite": { "^/api": "" } }, "/socket.io": { "target": "http://localhost:3001", "secure": false, "ws": true } }; // Use: ng serve --proxy-config proxy.conf.js

Build Angular Application

# Development build ng build # Production build (optimized, minified) ng build --configuration production ng build --prod # Output directory: dist/your-project-name/ # Serve production build cd dist/your-project-name npx http-server -p 4200 # Or use serve package npm install -g serve serve -s dist/your-project-name -p 4200

Run Multiple Angular Projects

# Project 1 on port 4200 cd project1 ng serve # Project 2 on port 4201 cd project2 ng serve --port 4201 # Project 3 on port 4202 cd project3 ng serve --port 4202 # Or use different terminals/tabs # Each project runs independently

Configure Firewall for Port 4200

Windows Firewall

# Allow port 4200 netsh advfirewall firewall add rule name="Angular Port 4200" dir=in action=allow protocol=TCP localport=4200 # Remove rule netsh advfirewall firewall delete rule name="Angular Port 4200"

Linux Firewall (UFW)

# Allow port 4200 sudo ufw allow 4200/tcp # Check status sudo ufw status # Remove rule sudo ufw delete allow 4200/tcp

Common Port 4200 Issues

Angular app won't start - port 4200 busy

  • Kill process using port 4200
  • Use different port: ng serve --port 4201
  • Check for zombie Node processes
  • Restart terminal or IDE
  • Close all terminal tabs and reopen

Cannot access localhost:4200 from mobile device

  • Run: ng serve --host 0.0.0.0
  • Check firewall allows port 4200
  • Ensure devices on same WiFi network
  • Use computer's IP, not localhost
  • Disable VPN if active

Live reload not working

  • Save files properly (Ctrl+S)
  • Check file watcher limits on Linux
  • Increase watchers: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
  • Restart development server
  • Clear browser cache

Compilation errors

  • Check TypeScript syntax errors
  • Verify imports are correct
  • Run ng lint to find issues
  • Delete node_modules and reinstall
  • Clear Angular cache: rm -rf .angular/cache

Angular CLI Configuration

// angular.json - Complete serve configuration { "projects": { "my-app": { "architect": { "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "my-app:build", "port": 4200, "host": "localhost", "ssl": false, "open": true, "liveReload": true, "poll": 2000, "proxyConfig": "proxy.conf.json" }, "configurations": { "production": { "browserTarget": "my-app:build:production" } } } } } } }

Test Port 4200 Connection

# Test with curl curl http://localhost:4200 # Test with telnet telnet localhost 4200 # Windows PowerShell Test-NetConnection -ComputerName localhost -Port 4200 # Test from browser # Open: http://localhost:4200
Development Tip: Port 4200 is for development only. Production Angular apps are built as static files and served by web servers (Nginx, Apache) on standard HTTP/HTTPS ports (80/443).

Angular vs Other Framework Ports

Framework Default Port Command
Angular 4200 ng serve
React (CRA) 3000 npm start
Vue CLI 8080 npm run serve
Next.js 3000 npm run dev
Vite 5173 npm run dev
Svelte 5000 npm run dev

Frequently Asked Questions

Why does Angular use port 4200?

Port 4200 was chosen by Angular CLI team as default. It's above privileged ports (1-1024), unlikely to conflict with other services, and easy to remember.

Can I run Angular on port 80?

Yes, but requires administrator/root privileges. Run: sudo ng serve --port 80. Not recommended for development; use 4200 and proxy for production.

How do I permanently change Angular port?

Edit angular.json file, set port in serve options. Or create npm script in package.json with custom port.

Why does Angular ask to run on different port?

Unlike React (which offers to use next available port), Angular shows error if port 4200 is busy. Use --port flag to specify different port manually.

Can I access Angular dev server from another computer?

Yes. Run ng serve --host 0.0.0.0 and access using your computer's IP address (e.g., http://192.168.1.100:4200) from other devices on network.

Related Ports and Resources