localhost:4200 — Angular

If your dev server is running on port 4200, you're in Angular territory. The Angular CLI's ng serve command fires up a Webpack-based development server here, with live reload baked in — save a file, the browser refreshes automatically. It's the default port Angular has used since Angular 2, and it hasn't changed since.

Unlike Vite (5173) which starts cold in under a second, Angular's development server takes longer — often 10-30 seconds for medium-sized projects. That's the tradeoff for Angular's more thorough compilation pipeline that catches type errors and template issues at build time rather than in the browser.

Starting the Dev Server

# Start Angular dev server
ng serve

# Auto-open the browser
ng serve --open

# Use a different port
ng serve --port 3000

# Expose to your local network (access from phone, etc.)
ng serve --host 0.0.0.0

If you don't have the Angular CLI installed globally, you can use npx: npx ng serve, or just use the npm script that every Angular project includes: npm start (which maps to ng serve in package.json).

Proxy API Calls to a Backend

The most common Angular dev question: "How do I make API calls to my backend without CORS errors?" The answer is Angular's built-in proxy configuration. Instead of your frontend calling http://localhost:3000/api directly (which triggers CORS because it's a different port), the dev server proxies the request:

// proxy.conf.json (create this in project root)
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

// angular.json — add to serve options:
"proxyConfig": "proxy.conf.json"

// Or via command line:
ng serve --proxy-config proxy.conf.json

Now http://localhost:4200/api/users silently forwards to http://localhost:3000/api/users. No CORS headers needed, and your production code can use relative URLs (/api/users) without caring about ports.

Permanently Change the Default Port

Instead of passing --port every time, set it in angular.json:

// angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "options": {
            "port": 3000
          }
        }
      }
    }
  }
}

Port 4200 Already in Use

Unlike Vite, which automatically picks the next available port, Angular just throws an error if 4200 is occupied. Fix it:

# Find what's using 4200
# Windows
netstat -ano | findstr "4200"
# macOS/Linux
lsof -i :4200

# Kill it (replace PID with the actual process ID)
# Windows
taskkill /PID 12345 /F
# macOS/Linux
kill -9 12345

# Or just use a different port
ng serve --port 4201

The most common culprit: a previous ng serve process that didn't terminate cleanly. Happens when you close the terminal without Ctrl+C.

Build for Production

# Production build (outputs to dist/)
ng build --configuration production

# Preview the production build locally
npx http-server dist/my-app -p 4200

The production build uses ahead-of-time compilation (AOT), tree-shaking, and minification. The output is static HTML/CSS/JS files that can be served by any web server — Nginx, Apache, or a CDN.

Angular vs. Other Frameworks

Framework	Default Port	Build Tool	Dev Startup
Angular	4200	Webpack / esbuild	10-30 seconds
React (Vite)	5173	Vite (esbuild)	~300ms
React (CRA)	3000	Webpack	~30 seconds
Vue (Vite)	5173	Vite	~300ms
Next.js	3000	Turbopack/Webpack	~2-5 seconds