129 lines
3.7 KiB
Markdown
129 lines
3.7 KiB
Markdown
# Setup incremental builds for Angular applications
|
||
|
||
In this guide we’ll specifically look into which changes need to be made to enable [incremental builds](/angular/ci/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:
|
||
|
||
```json
|
||
{
|
||
...
|
||
"scripts": {
|
||
...
|
||
"postinstall": "ngcc --properties es2015 browser module main",
|
||
...
|
||
}
|
||
...
|
||
}
|
||
```
|
||
|
||
> Please note that `ngcc` doesn’t support `pnpm` ([#32087](https://github.com/angular/angular/issues/32087#issuecomment-523225437) and [#38023](https://github.com/angular/angular/issues/38023#issuecomment-732423078)), 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
|
||
|
||
```bash
|
||
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.
|
||
|
||
```json
|
||
"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.
|
||
|
||
```json
|
||
"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.
|
||
|
||
```bash
|
||
nx build myapp --with-deps --parallel
|
||
```
|
||
|
||
To serve an app incrementally use this command:
|
||
|
||
```bash
|
||
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.
|
||
|
||
```json
|
||
"app0": {
|
||
"projectType": "application",
|
||
...
|
||
"architect": {
|
||
"build": {
|
||
"builder": "@nrwl/angular:webpack-browser",
|
||
"options": { ... }
|
||
"configurations": { ... }
|
||
},
|
||
"serve": {
|
||
"builder": "@nrwl/web:file-server",
|
||
"options": {
|
||
"buildTarget": "app0:build",
|
||
"withDeps": true,
|
||
"parallel": true
|
||
},
|
||
"configurations": {
|
||
"production": {
|
||
"buildTarget": "app0:build:production"
|
||
}
|
||
}
|
||
},
|
||
...
|
||
}
|
||
},
|
||
```
|
||
|
||
## Example repository
|
||
|
||
Check out the [nx-incremental-large-repo](https://github.com/nrwl/nx-incremental-large-repo) for a live example.
|