Incremental Build Improvements, Angular 12, Distributed Task Execution, and more in Nx 12.3!
Tags: nx, angular, monorepos, react
Published: 2021-05-13 18:08:58

**Nx 12.3 includes many new features, including Incremental Build Improvements, Angular 12, Distributed Task Execution, and more!**

**Nx** is a suite of powerful, extensible dev tools to help you architect, test, and build at any scale - integrating seamlessly with modern technologies and libraries while providing a robust CLI, computation caching, dependency management, and more.

If you aren't familiar with it, learn about Nx at [nx.dev/angular](https://nx.dev/angular) and [nx.dev/react](https://nx.dev/react).

---

## Incremental Build Improvements

Nx already supports incremental builds, and to enhance this feature we have introduced Target Dependencies. Each project's target may now declare other targets that the project depends on, meaning that those targets are completed before the project target is run.

As an example, let's look at an application with a dependency on a buildable library. The following workspace configuration below displays `app1` and `lib1` with lib1 needing to be built before `app1` is built. Previously, the `--with-deps` option was always required to build the dependencies of `app1`. Without specifying this option, the application would not build because its dependencies were not built. Because this requirement always has to be met, the `build` target for `app1` should declare a dependency on the build target of projects that app1 depends on. These dependencies can now be defined in the `workspace.json` within the target configuration for the project.

{% gist https://gist.github.com/brandonroberts/175333d86b125bfd11244f2c283072b7 %}

Now running `nx build app1` will also schedule and build `nx build lib1` without passing `--with-deps`.

Another example is serving an application that requires building itself beforehand. Now you can also specify that the target depends on another target defined for the same project.

{% gist https://gist.github.com/brandonroberts/1471240394da7ad6fbaaade4edd3711a %}

Now serving `app1` will first build `app1`, along with any additional target dependencies. Target Dependencies give you more control and customization over project dependencies. Now for incremental builds, you don't have to specifically pass `--with-deps`; The build is always incremental based on its target dependencies.

---

## Support for updating to Angular version 12

- Angular version 12 was just recently released and includes new features that many users are excited about, such as:
- Support for TypeScript 4.2.
- Full support for Webpack 5. In Angular 11, Webpack 5 was an opt-in feature.
- Support for NgRx version 12.
- Deprecation of Protractor as an E2E solution. Fortunately, Nx provides first-party support for [Cypress](https://cypress.io) E2E testing.
- Angular ESLint has been updated to version 12.
- Updated Angular Storybook to use the new Storybook version 6 syntax.
- Removal of the lint target with TSLint in favor of community-maintained packages. Fortunately, Nx also provides first-party support for [Angular ESLint](https://github.com/angular-eslint/angular-eslint). 

Nx also helps users migrate from TSLint to ESLint automatically. See the video below for a walkthrough.

Migrating Angular Applications from TSLint to ESLint

{% youtube JtVqJMzsqyY %}

As an additional note, users of Storybook 5 must upgrade to Storybook 6.2+ before upgrading to Angular 12. This is necessary because Storybook 6.2+ is needed to support Webpack 5+. See our [Storybook 5 to 6 migration guide](https://nx.dev/latest/angular/storybook/overview#upgrading-to-storybook-6-using-the-nx-migration-generator) for more details on how you can upgrade.

## Other Highlights

Each release of Nx also contains additional minor features and bug fixes. Some notable features include:

- Gatsby is listed as a ***preset*** when creating new Nx workspaces.
- Added **style-jsx** support for Gatsby.
- Next.js has been updated to **version 10.2**.
- Next.js apps now have support for **incremental builds**.
- Added **getJestProjects()** utility method to **@nrwl/jest package** for the root jest.config.js.
- Added **strict** option when generating React applications.
ESLint now has a **recommended extension** included for new workspaces.

## How to Update Nx

Updating Nx is done with the following command, and will update your dependencies and code to the latest version:

```sh
nx migrate latest
```

After updating your dependencies, run any necessary migrations.

```sh
nx migrate --run-migrations
```

---

## Distributed Task Execution for Nx Cloud

When working in large codebases, only running tasks based on what is affected in your Continuous Integration(CI) environment is a time-saver. Even when you do need to run those sets of tasks, it's better to run them in parallel to speed up your CI process. Traditionally, you would set up a parent job to split your tasks such as linting and testing into "buckets", and use child jobs to run each bucket of tasks, each with its own task details. This turns into a very challenging and ongoing effort to distribute and gather results from these tasks across a grid of machines. We've solved this problem numerous times, and are working on an exciting new feature for Nx Cloud called Distributed Task Execution (DTE). DTE is a new way to distribute the work of many tasks across many machines. DTE provides a Zero-Config️ way to coordinate and schedule all the tasks, execute them across multiple machines, and collect the results from these tasks into a single run, giving you a clean consolidated view of all tasks run and their details.

Watch as Victor Savkin demos this new feature using the Nx GitHub repo.

{% youtube Exs64pscwxA %}

DTE is in private beta right now, and will available to the public soon, and will be free for open-source projects. 

## Explore More

- [Nx is Modern Angular](https://blog.nrwl.io/nx-is-modern-angular-bda6cf10746d)
- [How to never build or test the same code twice](https://blog.nrwl.io/how-to-never-build-or-test-the-same-code-twice-2dc58e413279)
- [Plugging into the Dependency Graph Construction for Nx](https://blog.nrwl.io/plugging-into-the-dependency-graph-construction-for-nx-bc79814f5521)
- [Smarter and Faster Angular Development with Nx](https://blog.nrwl.io/smarter-and-faster-angular-development-with-nx-6ccca0fe18d1)
- Get our [free basic Nx workspaces course on youtube!](https://youtu.be/2mYLe9Kp9VM)
- **Purchase our premium video course on advanced practices for Nx workspaces: [here](https://nxplaybook.com/p/advanced-nx-workspaces)!**

---

As always, if you are looking for enterprise consulting, training and support, you can find out more about how we work with our clients [here](https://nrwl.io/services/consulting).
If you liked this, click the :heart: so other people will see it. Follow [Brandon Roberts](https://dev.to/brandontroberts) and [@nrwl_io](https://dev.to/nrwl) to read more about Nx and Nrwl. Also follow [Brandon](https://twitter.com/brandontroberts), [Nx](https://twitter.com/NxDevTools), and [Nrwl](https://twitter.com/nrwl_io) on Twitter!