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.

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}
10

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 my-lib --buildable

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

1{
2  "projectType": "library",
3  ...
4  "targets": {
5    "build": {
6      "executor": "@nrwl/angular:ng-packagr-lite",
7      "outputs": [
8        "dist/libs/my-lib"
9      ],
10      "options": {
11        ...
12      },
13      "configurations": {
14        ...
15      },
16      "defaultConfiguration": "production"
17    },
18    ...
19  },
20  ...
21},
22

Adjust the application executor

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

1{
2  "projectType": "application",
3  ...
4  "targets": {
5    "build": {
6      "executor": "@nrwl/angular:webpack-browser",
7      "outputs": [
8        "{options.outputPath}"
9      ],
10      "options": {
11        "buildLibsFromSource": false
12        ...
13      },
14      "configurations": {
15        ...
16      },
17      "defaultConfiguration": "production"
18    },
19    "serve": {
20      "executor": "@nrwl/web:file-server",
21      "options": {
22        "buildTarget": "my-app:build"
23      },
24      "configurations": {
25        "production": {
26          "buildTarget": "my-app:build:production"
27        }
28      }
29    },
30    ...
31  }
32},
33

Running and serving incremental builds

To build an application incrementally use the following command:

nx build my-app --parallel

To serve an application incrementally use this command:

nx serve my-app --parallel

1{
2  "projectType": "application",
3  ...
4  "targets": {
5    "build": {
6      "executor": "@nrwl/angular:webpack-browser",
7      "outputs": [
8        "{options.outputPath}"
9      ],
10      "options": {
11        "buildLibsFromSource": false
12        ...
13      },
14      "configurations": {
15        ...
16      }
17    },
18    "serve": {
19      "executor": "@nrwl/web:file-server",
20      "options": {
21        "buildTarget": "my-app:build",
22        "parallel": true
23      },
24      "configurations": {
25        "production": {
26          "buildTarget": "my-app:build:production"
27        }
28      }
29    },
30    ...
31  }
32},
33

Build target name

It is required to use the same target name for the build target (target using one of the executors that support incremental builds: @nrwl/angular:webpack-browser, @nrwl/angular:package and @nrwl/angular:ng-packagr-lite) in the project being built and the buildable libraries it depends on. The executors that support incremental builds rely on the build target name of the project to identify which of the libraries it depends on are buildable.

If you need to have a different build target name for an application (or library) build (e.g. when composing different targets), you need to make sure the build target name of all the relevant projects is the same.

Say you have the same application above with a configuration as follows:

1{
2  "projectType": "application",
3  ...
4  "targets": {
5    "build-base": {
6      "executor": "@nrwl/angular:webpack-browser",
7      "outputs": [
8        "{options.outputPath}"
9      ],
10      "options": {
11        "buildLibsFromSource": false
12        ...
13      },
14      "configurations": {
15        ...
16      }
17    },
18    "build": {
19      "executor": "@nrwl/workspace:run-commands",
20      "outputs": [
21        "{options.outputPath}"
22      ],
23      "options": {
24        "commands": [
25          "node ./tools/scripts/important-script.js",
26          "node ./tools/scripts/another-important-script.js"
27        ],
28        ...
29      },
30      "configurations": {
31        ...
32      }
33    },
34    "serve": {
35      "executor": "@nrwl/web:file-server",
36      "options": {
37        "buildTarget": "my-app:build-base",
38        "parallel": true
39      },
40      "configurations": {
41        "production": {
42          "buildTarget": "my-app:build-base:production"
43        }
44      }
45    },
46    ...
47  }
48},
49

And the targetDefaults configured in the nx.json as:

1{
2  "targetDefaults": {
3    "build": {
4      "dependsOn": ["build-base"]
5    },
6    "build-base": {
7      "dependsOn": ["^build-base"]
8    }
9  }
10}
11

The build target name of the application is build-base. Therefore, the build target name of the buildable libraries it depends on must also be build-base:

1{
2  "projectType": "library",
3  ...
4  "targets": {
5    "build-base": {
6      "executor": "@nrwl/angular:ng-packagr-lite",
7      "outputs": [
8        "dist/libs/my-lib"
9      ],
10      "options": {
11        ...
12      },
13      "configurations": {
14        ...
15      },
16      "defaultConfiguration": "production"
17    },
18    ...
19  },
20  ...
21},
22

Example repository

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