@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
"build": {
  "executor": "@nx/angular:webpack-browser",
  "options": {
    ...
    "customWebpackConfig": {
      "path": "apps/my-app/webpack.config.js"
    }
  }
},
"serve": {
  "executor": "@nx/angular:dev-server",
  "configurations": {
    "production": {
      "buildTarget": "my-app:build:production"
    },
    "development": {
      "buildTarget": "my-app:build:development"
    }
  },
  "defaultConfiguration": "development",
}

apps/my-app/webpack.config.js
module.exports = (config) => {
  // update the config with your custom configuration

  return config;
};

Options playground

Try out this interactive editor of the configuration object. Values are validated as you type and hovering over labels will give you more information.

Examples

These buttons show the config object for specific common tasks.

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.

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.

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.

inspect

oneOf [string, boolean]

Default: false

Activate debugging inspector. This option only has an effect when 'SSR' or 'SSG' are enabled. Note: this is only supported in Angular versions >= 18.1.0.

liveReload

boolean

Default: true

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

open

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.dev/tools/cli/serve#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 v20.