Running the Dev Server

The Angular CLI dev server compiles your application in memory, serves it to the browser, and watches for file changes to trigger automatic rebuilds.

Starting the Server

ng serve

This compiles the app and serves it at http://localhost:4200. The first build takes a few seconds; subsequent rebuilds after file changes complete in under a second.

Common Flags

# Change the port
ng serve --port 4300

# Open the browser automatically
ng serve --open

# Bind to a different host (for network access)
g serve --host 0.0.0.0

# Disable live reload
ng serve --no-live-reload

# Serve with a specific configuration
ng serve --configuration development

What Happens When You Save a File

1. The CLI detects the file change
2. Webpack recompiles only the affected modules
3. The new code is pushed to the browser via a WebSocket connection
4. The browser updates the view without a full page reload

Stopping the Server

Press Ctrl+C in the terminal where the server is running.

Production vs Development Builds

The dev server uses the development configuration by default:

• Source maps enabled for debugging
• No minification
• Faster rebuild times
• Verbose error messages

For a production-like experience locally:

ng serve --configuration production

When your Angular app calls a backend API during development, you will hit CORS restrictions. The CLI provides a proxy configuration to forward API requests to your backend server.

Creating a Proxy Config

Create proxy.conf.json in your project root:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

Using the Proxy

ng serve --proxy-config proxy.conf.json

Or add it to angular.json so it is always used:

{
  "architect": {
    "serve": {
      "options": {
        "proxyConfig": "proxy.conf.json"
      }
    }
  }
}

How It Works

When your app makes a request to /api/users, the dev server forwards it to http://localhost:3000/api/users. The browser sees a same-origin request, so CORS headers are not required.

Multiple Proxy Targets

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  },
  "/auth": {
    "target": "http://localhost:4000",
    "secure": false
  }
}

This lets you route different API prefixes to different backend services during development.