Rescope @nrwl to @nx
@nx/angularSee schema

@nx/angular:webpack-browser

The webpack-browser executor is very similar to the standard browser builder provided by the Angular Devkit. It allows you to build your Angular application to a build artifact that can be hosted online. There are some key differences:

  • Supports Custom Webpack Configurations
  • Supports Incremental Building

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.

Using a custom webpack configuration

The executor supports providing a path to a custom webpack configuration. This allows you to customize how your Angular application is built. It currently supports the following types of webpack configurations:

  • object
  • Function
  • Promise<object|Function>

The executor will merge the provided configuration with the webpack configuration that Angular Devkit uses. The merge order is:

  • Angular Devkit Configuration
  • Provided Configuration

To use a custom webpack configuration when building your Angular application, change the build target in your project.json to match the following:

1"build": { 2 "executor": "@nx/angular:webpack-browser", 3 "options": { 4 ... 5 "customWebpackConfig": { 6 "path": "apps/appName/webpack.config.js" 7 } 8 } 9} 10
Nx 15 and lower use @nrwl/ instead of @nx/
Incrementally Building your Application

The executor supports incrementally building your Angular application by building the workspace libraries it depends on (that have been marked as buildable) and then building your application using the built source of the libraries.

This can improve build time as the building of the workspace libraries can be cached, meaning they only have to be rebuilt if they have changed.

Note: There may be some additional overhead in the linking of the built libraries' sources which may reduce the overall improvement in build time. Therefore this approach only benefits large applications and would likely have a negative impact on small and medium applications.
You can read more about when to use incremental builds here.

To allow your Angular application to take advantage of incremental building, change the build target in your project.json to match the following:

1"build": { 2 "executor": "@nx/angular:webpack-browser", 3 "options": { 4 ... 5 "buildLibsFromSource": false 6 } 7} 8
Nx 15 and lower use @nrwl/ instead of @nx/

Options

index

Required
oneOf [string, object ]

Configures the generation of the application's HTML index.

main

Required
string

The full path for the main entry point to the app, relative to the current workspace.

outputPath

Required
string

The full path for the new output directory, relative to the current workspace.

By default, writes output to a folder named dist/ in the current project.

tsConfig

Required
string

The full path for the TypeScript configuration file, relative to the current workspace.

customWebpackConfig

customWebpackConfig

Options for additional webpack configurations.

styles

Array<oneOf [object , string]>
Default: []

Global styles to be included in the build.

assets

Array<oneOf [object , string]>
Default: []

List of static application assets.

aot

boolean
Default: true

Build using Ahead of Time compilation.

allowedCommonJsDependencies

Array<string>
Default: []

A list of CommonJS packages that are allowed to be used without a build time warning.

baseHref

string

Base url for the application being built.

buildOptimizer

boolean
Default: true

Enables advanced build optimizations when using the 'aot' option.

budgets

Array<budgets items >
Default: []

Budget thresholds to ensure parts of your application stay within boundaries which you set.

buildLibsFromSource

boolean
Default: true

Read buildable libraries from source instead of building them separately.

commonChunk

boolean
Default: true

Generate a seperate bundle containing code used across multiple bundles.

crossOrigin

string
Default: none
Accepted values: none, anonymous, use-credentials

Define the crossorigin attribute setting of elements that provide CORS support.

deleteOutputPath

boolean
Default: true

Delete the output path before building.

extractLicenses

boolean
Default: true

Extract all licenses in a separate file.

fileReplacements

Array<oneOf [object , object ]>
Default: []

Replace compilation source files with other compilation source files in the build.

inlineStyleLanguage

string
Default: css
Accepted values: css, less, sass, scss

The stylesheet language to use for the application's inline component styles.

i18nMissingTranslation

string
Default: warning
Accepted values: warning, error, ignore

How to handle missing translations for i18n.

i18nDuplicateTranslation

string
Default: warning
Accepted values: warning, error, ignore

How to handle duplicate translations for i18n.

indexFileTransformer

string

Path to transformer function to transform the index.html

localize

oneOf [boolean, Array<string>]

Translate the bundles in one or more locales.

namedChunks

boolean
Default: false

Use file name for lazy loaded chunks.

ngswConfigPath

string

Path to ngsw-config.json.

optimization

oneOf [object , boolean]
Default: true

Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.

outputHashing

string
Default: none
Accepted values: none, all, media, bundles

Define the output filename cache-busting hashing mode.

polyfills

oneOf [Array<string>, string]

Polyfills to be included in the build.

progress

boolean
Default: true

Log progress to the console while building.

poll

number

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

preserveSymlinks

boolean

Do not use the real path when resolving modules. If unset then will default to true if NodeJS option --preserve-symlinks is set.

resourcesOutputPath

string
Default:

The path where style resources will be placed, relative to outputPath.

scripts

Array<oneOf [object , string]>
Default: []

Global scripts to be included in the build.

stylePreprocessorOptions

stylePreprocessorOptions

Options to pass to style preprocessors.

sourceMap

oneOf [object , boolean]
Default: false

Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration.

subresourceIntegrity

boolean
Default: false

Enables the use of subresource integrity validation.

serviceWorker

boolean
Default: false

Generates a service worker config for production builds.

statsJson

boolean
Default: false

Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.

vendorChunk

boolean
Default: false

Generate a seperate bundle containing only vendor libraries. This option should only be used for development to reduce the incremental compilation time.

verbose

boolean
Default: false

Adds more details to output logging.

watch

boolean
Default: false

Run build when files change.

webWorkerTsConfig

string

TypeScript configuration for Web Worker modules.

deployUrl

Deprecated
string

URL where files will be deployed.

Use baseHref option, APP_BASE_HREF DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url.