Setup incremental builds for Angular applications

In this guide we’ll specifically look into which changes need to be made to enable incremental builds for Angular applications.
Incremental builds require @nrwl/angular:webpack-browser, which requires Nx version 10.4.0 or later.

Requirements

It’s required that you run the Angular compatibility compiler (ngcc) after every package installation if you have Ivy enabled. This comes configured by default in every Nx workspace. The incremental build relies on the fact that ngcc must have already been run. You can check your package.json and make sure you have the following:

1{
2    ...
3    "scripts": {
4        ...
5        "postinstall": "ngcc --properties es2015 browser module main",
6        ...
7    }
8    ...
9}

Please note that ngcc doesn’t support pnpm (#32087 and #38023), so you need to use either yarn or npm.

Use buildable libraries

To enable incremental builds you need to use buildable libraries. You can generate a new buildable lib with

nx g @nrwl/angular:lib mylib --buildable

Adjust the executors/builders

Nx comes with faster executors allowing for a faster build. Make sure that your libraries use the @nrwl/angular:ng-packagr-lite builder.

1"mylib": {
2    "projectType": "library",
3    ...
4    "architect": {
5        "build": {
6            "builder": "@nrwl/angular:ng-packagr-lite",
7            "options": {...},
8            "configurations": {...}
9        },
10        "lint": {...},
11        "test": {...}
12    },
13   ...
14},

Change your Angular app’s executor to @nrwl/angular:webpack-browser and the “serve” executor to @nrwl/web:file-server instead.

1"app0": {
2    "projectType": "application",
3    ...
4    "architect": {
5        "build": {
6            "builder": "@nrwl/angular:webpack-browser",
7            "options": { ... }
8            "configurations": { ... }
9        },
10        "serve": {
11            "builder": "@nrwl/web:file-server",
12            "options": {
13                "buildTarget": "app0:build"
14            },
15            "configurations": {
16                "production": {
17                    "buildTarget": "app0:build:production"
18                }
19            }
20        },
21        ...
22    }
23},

Running and serving incremental builds

To build an app incrementally use the following commands.

nx build myapp --with-deps --parallel

To serve an app incrementally use this command:

nx serve myapp --with-deps --parallel

Note: you can specify the --with-deps and --parallel flags as part of the options property on the file-server executor in your angular.json or workspace.json. The file-server executor will pass those to the nx build command it invokes.

1"app0": {
2    "projectType": "application",
3    ...
4    "architect": {
5        "build": {
6            "builder": "@nrwl/angular:webpack-browser",
7            "options": { ... }
8            "configurations": { ... }
9        },
10        "serve": {
11            "builder": "@nrwl/web:file-server",
12            "options": {
13                "buildTarget": "app0:build",
14                "withDeps": true,
15                "parallel": true
16            },
17            "configurations": {
18                "production": {
19                    "buildTarget": "app0:build:production"
20                }
21            }
22        },
23        ...
24    }
25},

Example repository

Check out the nx-incremental-large-repo for a live example.