@nx/angular:dev-server

Serves an Angular application using webpack when the build target is using a webpack-based executor, or Vite when the build target uses an esbuild-based executor.

Options can be configured in project.json when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/reference/project-configuration#targets.

This executor is a drop-in replacement for the @angular-devkit/build-angular:dev-server builder provided by the Angular CLI. In addition to the features provided by the Angular CLI builder, the @nx/angular:dev-server executor also supports the following:

  • Serving applications with Vite when using the @nx/angular:application or @nx/angular:browser-esbuild executors to build them
  • Serving applications with webpack when using the @nx/angular:webpack-browser executor
  • Providing HTTP request middleware functions when the build target is using an esbuild-based executor
  • Incremental builds

Examples

This executor should be used along with @nx/angular:webpack-browser to serve an application using a custom webpack configuration.

Add the serve target using the @nx/angular:dev-server executor, set the build target executor as @nx/angular:webpack-browser and set the customWebpackConfig option as shown below:

apps/my-app/project.json
1"build": { 2 "executor": "@nx/angular:webpack-browser", 3 "options": { 4 ... 5 "customWebpackConfig": { 6 "path": "apps/my-app/webpack.config.js" 7 } 8 } 9}, 10"serve": { 11 "executor": "@nx/angular:dev-server", 12 "configurations": { 13 "production": { 14 "buildTarget": "my-app:build:production" 15 }, 16 "development": { 17 "buildTarget": "my-app:build:development" 18 } 19 }, 20 "defaultConfiguration": "development", 21} 22
apps/my-app/webpack.config.js
1module.exports = (config) => { 2 // update the config with your custom configuration 3 4 return config; 5}; 6

Options

Mixins

This type has all of the properties below, but must also match this type:

anyOf [required: buildTarget, required: browserTarget]

buildLibsFromSource

boolean

Read buildable libraries from source instead of building them separately. If not set, it will take the value specified in the browserTarget options, or it will default to true if it's also not set in the browserTarget options.

allowedHosts

Array<string>
Default: []

List of hosts that are allowed to access the dev server.

buildTarget

string
Pattern: ^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$

A build builder target to serve in the format of project:target[:configuration].

disableHostCheck

boolean
Default: false

Don't verify connected clients are part of allowed hosts.

esbuildMiddleware

Array<string>

A list of HTTP request middleware functions. Note: this is only supported in Angular versions >= 17.0.0.

forceEsbuild

boolean
Default: false

Force the development server to use the 'browser-esbuild' builder when building. This is a developer preview option for the esbuild-based build system. Note: this is only supported in Angular versions >= 16.1.0.

host

string
Default: localhost

Host to listen on.

headers

Custom HTTP headers to be added to all responses.

hmr

boolean
Default: false

Enable hot module replacement.

liveReload

boolean
Default: true

Whether to reload the page on change, using live-reload.

open

o
boolean
Default: false

Opens the url in default browser.

port

number
Default: 4200

Port to listen on.

proxyConfig

string

Proxy configuration file. For more information, see https://angular.io/guide/build#proxying-to-a-backend-server.

publicHost

string

The URL that the browser client (or live-reload client, if enabled) should use to connect to the development server. Use for a complex dev server setup, such as one with reverse proxies.

poll

number

Enable and define the file watching poll time period in milliseconds.

prebundle

oneOf [boolean, object ]

Enable and control the Vite-based development server's prebundling capabilities. To enable prebundling, the Angular CLI cache must also be enabled. This option has no effect when using the 'browser' or other Webpack-based builders. Note: this is only supported in Angular versions >= 17.2.0.

ssl

boolean
Default: false

Serve using HTTPS.

sslKey

string

SSL key to use for serving HTTPS.

sslCert

string

SSL certificate to use for serving HTTPS.

servePath

string

The pathname where the app will be served.

verbose

boolean

Adds more details to output logging.

watch

boolean
Default: true

Rebuild on change.

browserTarget

Deprecated
string
Pattern: ^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$

A browser builder target to serve in the format of project:target[:configuration]. Ignored if buildTarget is set.

Use 'buildTarget' instead. It will be removed in Nx v19.