Run ng serve from an Angular CLI workspace to compile your app and start a local development server. It rebuilds and reloads the app as you change code. For a local API, configure a development proxy; for deployable output, use ng build instead.
Run an Angular app locally
- Open a terminal in the Angular CLI workspace—the directory containing
angular.json. - Run
ng serve. If the workspace contains multiple projects, specify one withng serve project-name. Without a project name, Angular uses the workspace’s default project. - Open the local address printed in the terminal. The current CLI reference lists
http://localhost:4200/as the default. - Change application code and let the server rebuild and live reload. Stop the server with
Ctrl+C.
Angular’s documentation, “Serving Angular apps for development,” says: “You can serve your Angular CLI application with the ng serve command.” The command invokes the selected project’s configured serve target; it compiles the app and starts a development server rather than producing a production deployment.
Check the serve target and available options
The serve target in angular.json determines how the app is served. Its builder and options can differ between projects, particularly in older or migrated workspaces. Angular identifies @angular/build:dev-server as the common builder in current projects, but the file in your workspace is authoritative for that project.
The current CLI reference documents ng serve (also available as ng dev and ng s) and options such as --host, --port, --open, --watch, --live-reload, --hmr, --configuration, --proxy-config, and --ssl. It lists localhost and port 4200 as defaults; watch and live reload are enabled by default, and HMR defaults to the live-reload setting. Check ng serve --help in your installed CLI if its version differs from the current reference.
#1 Best Overall
Connect the development server to a local API
If the frontend calls a backend running locally—for example, on port 3000—a development proxy can forward API requests. Angular’s official example routes /api/** requests to http://localhost:3000.
- Create a proxy configuration file using the format supported by your installed CLI and builder.
- Either set
proxyConfigon the project’sservetarget inangular.json, or start the server withng serve --proxy-config path/to/proxy.conf.json. - Make API calls to the matching local path, such as
/api, and verify the backend is running. - Restart
ng serveafter changing the proxy configuration.
Check the configured builder when a proxy rule that used to work stops matching. The current Vite-based @angular/build:dev-server distinguishes path depth: /api matches only the base path, /api/* matches one path segment, and /api/** matches nested paths. The older Webpack-based @angular-devkit/build-angular:dev-server treats /api as matching the base route and subpaths. A builder migration can therefore change which requests a rule forwards.
Choose development serving or a production build
| Command | Purpose and behavior |
|---|---|
ng serve |
Runs the workspace’s configured serve target, using development settings by default. It is intended for local iteration and rebuilds when files change. |
ng build |
Builds application output. Angular documents production configuration as the default and says development-only code is removed from the output. |
Named configurations and target options in angular.json can alter how a project is served or built. Angular documents development configurations as including checks, detailed errors, and debugging helpers. Use the development server while editing; use a production build when preparing artifacts for deployment.
Keep secrets out of client-side environment files
Environment-specific source files can provide values such as an API base URL for different configurations, but their contents are bundled into the client application and are visible to anyone who loads the page. Do not put API keys or other secrets in them. Keep secret values on the server and route requests through a backend or secrets manager.
Understand HMR support in your project
The current CLI reference exposes an HMR option, but support and defaults depend on the CLI generation and builder. Angular’s build-system migration documentation describes hot replacement of component templates and styles in its documented build-system workflow. Check that guidance and your installed CLI’s help before relying on HMR behavior; otherwise, use the live-reload behavior configured for your project.
Quick Recap
Best Value
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
