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 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 library with:

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

The generated buildable library uses the @nrwl/angular:ng-packagr-lite executor which is optimized for the incremental builds scenario:

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

Please note that it is important to keep the outputs property in sync with the dest property in the file ng-package.json located inside the library root. When a library is generated, this is configured correctly, but if the path is later changed in ng-package.json, it needs to be updated as well in the project configuration.

Adjust the app executor

Change your Angular app’s “build” target executor to @nrwl/angular:webpack-browser and the “serve” target executor to @nrwl/web:file-server as shown below:

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

Running and serving incremental builds

To build an app incrementally use the following command:

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            "outputs": ["{options.outputPath}"],
8            "options": { ... }
9            "configurations": { ... }
10        },
11        "serve": {
12            "builder": "@nrwl/web:file-server",
13            "options": {
14                "buildTarget": "app0:build",
15                "withDeps": true,
16                "parallel": true
17            },
18            "configurations": {
19                "production": {
20                    "buildTarget": "app0:build:production"
21                }
22            }
23        },
24        ...
25    }
26},

Example repository

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