You can serve your Angular CLI application with the ng serve
command.
This will compile your application, skip unnecessary optimizations, start a devserver, and automatically rebuild and live reload any subsequent changes.
You can stop the server by pressing Ctrl+C
.
ng serve
only executes the builder for the serve
target in the default project as specified in angular.json
.
While any builder can be used here, the most common (and default) builder is @angular-devkit/build-angular:dev-server
.
You can determine which builder is being used for a particular project by looking up the serve
target for that project.
{ "projects": { "my-app": { "architect": { // `ng serve` invokes the Architect target named `serve`. "serve": { "builder": "@angular-devkit/build-angular:dev-server", // ... }, "build": { /* ... */ } "test": { /* ... */ } } } }}
This page discusses usage and options of @angular-devkit/build-angular:dev-server
.
Proxying to a backend server
Use proxying support to divert certain URLs to a backend server, by passing a file to the --proxy-config
build option.
For example, to divert all calls for http://localhost:4200/api
to a server running on http://localhost:3000/api
, take the following steps.
Create a file
proxy.conf.json
in your project'ssrc/
folder.Add the following content to the new proxy file:
{ "/api": { "target": "http://localhost:3000", "secure": false } }
In the CLI configuration file,
angular.json
, add theproxyConfig
option to theserve
target:{ "projects": { "my-app": { "architect": { "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "proxyConfig": "src/proxy.conf.json" } } } } } }
To run the development server with this proxy configuration, call
ng serve
.
Edit the proxy configuration file to add configuration options; following are some examples.
For a detailed description of all options, refer to the webpack DevServer documentation when using @angular-devkit/build-angular:browser
, or the Vite DevServer documentation when using @angular-devkit/build-angular:browser-esbuild
or @angular-devkit/build-angular:application
.
NOTE: If you edit the proxy configuration file, you must relaunch the ng serve
process to make your changes effective.