nx/docs/angular/guides/setup-incremental-builds.md

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.

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.

"mylib": {
    "projectType": "library",
    ...
    "architect": {
        "build": {
            "builder": "@nrwl/angular:ng-packagr-lite",
            "options": {...},
            "configurations": {...}
        },
        "lint": {...},
        "test": {...}
    },
   ...
},

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

"app0": {
    "projectType": "application",
    ...
    "architect": {
        "build": {
            "builder": "@nrwl/angular:webpack-browser",
            "options": { ... }
            "configurations": { ... }
        },
        "serve": {
            "builder": "@nrwl/web:file-server",
            "options": {
                "buildTarget": "app0:build"
            },
            "configurations": {
                "production": {
                    "buildTarget": "app0:build:production"
                }
            }
        },
        ...
    }
},

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 obviously specify the --with-deps and --parallel flags as part of the options property on the executor in your angular.json or workspace.json.

"mylib": {
    "projectType": "library",
    ...
    "architect": {
        "build": {
            "builder": "@nrwl/angular:ng-packagr-lite",
            "options": {
                ...,
                "withDeps": true,
                "parallel": true
            },
            ...
        },
    },
   ...
},

Example repository

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