Angular Run Command: How to Compile and Serve Your Project Locally

The ng serve command is the standard angular run command that compiles your application in development mode, starts a Vite-based dev server, and enables live reloading at http://localhost:4200.

The angular/angular repository provides the Angular CLI, a powerful toolchain for building modern web applications. Understanding the correct angular run command is essential for rapidly iterating on your projects with automatic compilation and browser synchronization during development and testing.

How the Angular Run Command Works

The ng serve command executes the serve target defined in your workspace's angular.json file. According to the Angular source code in adev/src/content/tools/cli/serve.md, this target uses the @angular/build:dev-server builder by default, which runs a Vite-based development server optimized for fast incremental builds.

When you execute this angular run command, the CLI compiles your application using the development configuration, which skips production optimizations to prioritize build speed. The process hosts your application at http://localhost:4200 unless configured otherwise, and maintains an active file watcher that triggers automatic rebuilds and hot module replacement whenever source files change.

Basic Syntax and Common Options

You can invoke the angular run command from your terminal within the project directory. The CLI supports several flags to customize the development server behavior.

Basic execution:

ng serve

This serves your default project at http://localhost:4200 with live reload enabled.

Common flags include:

• --open (or -o): Automatically launches the default browser when the server starts
• --port: Specifies a custom port number (e.g., --port 4201)
• --proxy-config: Points to a proxy configuration file for API request forwarding

Practical examples:

# Open browser automatically

ng serve --open

# Run on a custom port

ng serve --port 4500

# Use API proxy configuration

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

Configuring the Serve Target in angular.json

The behavior of the angular run command is controlled by the serve object located under your project's architect section in angular.json. As documented in the Angular CLI source at adev/src/content/tools/cli/serve.md, this configuration defines the builder, default options, and environment-specific settings.

Key configuration properties include:

• builder: Defaults to @angular/build:dev-server (Vite-based), though you can switch to legacy Webpack-based builders if needed
• options: Defines default ports, host settings, and proxy configurations
• configurations: Specifies alternative settings for different development scenarios

Example snippet from angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "builder": "@angular/build:dev-server",
          "options": {
            "port": 4200,
            "open": true
          }
        }
      }
    }
  }
}

Proxying Backend API Requests

For full-stack development, the angular run command supports proxying HTTP requests to a separate backend server. Create a proxy configuration file (typically src/proxy.conf.json) and reference it using the --proxy-config flag.

Sample src/proxy.conf.json:

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

Execute with:

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

This forwards all requests matching /api/** to your backend running on port 3000, eliminating CORS issues during development.

Summary

• The ng serve command is the primary angular run command for local development, executing the serve target from angular.json
• It uses the @angular/build:dev-server builder (Vite-based) to provide fast incremental builds and live reloading
• The default development server hosts at http://localhost:4200 with automatic browser refresh on file changes
• Configure options via angular.json or CLI flags like --port, --open, and --proxy-config
• Use --proxy-config to redirect API calls to backend servers during development

Frequently Asked Questions

What is the default port for the Angular run command?

The default port is 4200. You can override this using the --port flag (e.g., ng serve --port 4500) or by setting the port option in the serve configuration within angular.json.

How do I automatically open the browser when using ng serve?

Add the --open flag (or -o) to your command: ng serve --open. This launches your default browser automatically once the development server starts serving your application.

Can I use the Angular run command with a custom backend API?

Yes. Use the --proxy-config flag to specify a proxy configuration file (typically src/proxy.conf.json). This redirects API requests to your backend server, avoiding CORS issues while developing locally.

Where is the serve configuration stored in an Angular project?

The serve configuration is defined in angular.json under your project's architect section. This file specifies the builder (default is @angular/build:dev-server), default ports, and other options that control how ng serve behaves.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}