docs(nx-dev): add 21.2 release article (#31585)

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
This commit is contained in:
Philip Fulcher 2025-06-13 11:03:52 -06:00 committed by GitHub
parent 363058ee54
commit db86a355c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 105 additions and 0 deletions

View File

@ -0,0 +1,78 @@
---
title: 'Nx 21.2 Release: Big upgrades to Angular 20, NestJS 11, and Storybook 9'
slug: nx-21-2-release
authors: ['Philip Fulcher']
tags: ['nx', 'release']
cover_image: /blog/images/2025-06-13/header.avif
description: 'Discover the latest in Nx 21.2, featuring Angular 20, NestJS 11, and Storybook 9'
---
Nx 21.2 is here! This release is focused on migrating to newer versions of some of our favorite technologies: Angular 20, Storybook 9, and NestJS 11.
{% toc /%}
## What's new in Angular 20
![Angular logo on a dark background](/blog/images/2025-06-13/angular.avif)
We'll leave it to the Angular team for [all the details](https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301), but we wanted to call out a few changes that may impact Nx workspaces.
### Structural directives deprecated
It's time to part ways with structural directives like `*ngIf` and `*ngFor` and move on to control flow with `@if` and `@for`.
Your workspace will be migrated to control flow by default during migration to Nx 21.2. If youd like to hang on to that syntax a little longer, see our docs on [running migration in interactive mode](/recipes/tips-n-tricks/advanced-update) to skip this migration. Or use the newly introduced [Migrate UI in Nx Console](/recipes/nx-console/console-migrate-ui) to skip the migration.
If you choose not to migrate now, youll be able to re-run the migration later:
```shell
nx g @angular/core control-flow
```
### Experimental support for Vitest from the Angular team
Angular 20 introduces experimental support for [vitest](https://vitest.dev/) as a unit test runner. This is a fantastic addition to the core set of tools offered by the Angular team. Nx already offers vitest as an option when creating Angular apps and libraries, which is enabled by installing the [Analog plugin](https://analogjs.org/docs/features/testing/overview). You can choose between vitest support via the Analog plugin or through the new experimental vitest support. Nx generators will continue to use the Analog plugin. See the [Angular documentation](https://angular.dev/guide/testing/unit-tests) on how to use the vitest builder.
### New style guide changes
Last year, the Angular team opened [an RFC for changes to the style guide](https://github.com/angular/angular/discussions/58412), and Angular 20 implements the changes discussed. One of the bigger changes is that the Angular CLI has changed the format of filenames used when generating code. Generators provided by Nx will also follow the new style guide for new workspaces using Angular, but **the previous behavior will be retained for existing workspaces**. This is the same process the Angular CLI is following.
As part of migrating to Nx 21.2, generator and schematic defaults will be set for your workspace so that filename suffixes continue to be added. You can see what that change looks like in the [migration documentation](/technologies/angular/api/migrations#setgeneratordefaultsforpreviousstyleguide).
### BREAKING CHANGE: Angular 17 support removed
Following our [support schedule](/technologies/angular/recipes/angular-nx-version-matrix), Angular 17 is no longer supported in Nx 21.2. If you want to continue with Angular 17, you'll need to postpone upgrading to Nx 21.2 for now.
## NestJS 11 is here!
![NestJS logo on a dark background](/blog/images/2025-06-13/nest.avif)
Angular isn't the only framework getting attention with this release: we've also added support for [NestJS 11](https://trilon.io/blog/announcing-nestjs-11-whats-new)! This release brings better logging, more flexible microservices, and faster application startup. Your workspace will automatically be migrated to this new version as part of migrating to Nx 21.2.
## Storybook 9 makes testing components better than ever
![Storybook logo on a dark background](/blog/images/2025-06-13/storybook.avif)
[Storybook 9 is here](https://storybook.js.org/blog/storybook-9/) with faster, leaner component tests powered by vitest. By default, your workspace will be automatically migrated to Storybook 9 as part of Nx 21.2. If you choose to skip that migration, you can re-run it later using our [Storybook 9 setup guide](/technologies/test-tools/storybook/recipes/storybook-9-setup).
### BREAKING CHANGE: Deprecated Storybook generators removed
Deprecated Storybook generators have been removed: `@nx/storybook:cypress-project`, `@nx/react-native:storybook-configuration`, `@nx/react-native:stories`, `@nx/react-native:component-story`. Use [`@nx/storybook:configuration`](/technologies/test-tools/storybook/api/generators/configuration) instead.
## Migrating to latest version
As always, to migrate to the latest version of Nx, you can use the `migrate` command:
```shell
nx migrate latest
```
Or if you're using Nx Console, you can use the recently introduced [Migrate UI](/recipes/nx-console/console-migrate-ui).
Learn more:
- 👩‍💻 [Automate updating dependencies](/features/automate-updating-dependencies)
- 👩‍💻 [Nx GitHub](https://github.com/nrwl/nx)
- 👩‍💻 [Nx Console GitHub](https://github.com/nrwl/nx-console)
- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 968 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

27
docs/changelog/21_2_0.md Normal file
View File

@ -0,0 +1,27 @@
# Nx 21.2
[Read the 21.2 release blog post](/blog/nx-21-2-release)
## Features
{% cards cols="2" %}
{% card title="Angular 20 Support" type="document" url="/technologies/angular/introduction" /%}
{% card title="Storybook 9 Support" type="document" url="/technologies/test-tools/storybook/introduction" /%}
{% card title="Nest 11 Support" type="document" url="/technologies/node/nest/introduction" /%}
{% /cards %}
## Bug Fixes
{% cards cols="2" %}
{% card title="Handle Killing Child Processes of Continuous Tasks on Windows" type="external" url="https://github.com/nrwl/nx/pull/31296" /%}
{% card title="Write TypeScript Plugin Cache Files Atomically" type="external" url="https://github.com/nrwl/nx/pull/31390" /%}
{% card title="Scope TypeScript Resolution Cache Correctly When Processing Graph" type="external" url="https://github.com/nrwl/nx/pull/31455" /%}
{% card title="Use Next Available Port When NX Graph Port Is in Use" type="external" url="https://github.com/nrwl/nx/pull/31365" /%}
{% card title="Handle External Node Without Default Version in PNPM Pruned Lockfile" type="external" url="https://github.com/nrwl/nx/pull/31503" /%}
{% card title="Fix Module Federation Runtime Chunk Configuration" type="external" url="https://github.com/nrwl/nx/pull/31256" /%}
{% /cards %}
## Breaking Changes
- Angular 17 support has been removed.
- Deprecated Storybook generators have been removed: `@nx/storybook:cypress-project`, `@nx/react-native:storybook-configuration`, `@nx/react-native:stories`, `@nx/react-native:component-story`. Use [`@nx/storybook:configuration`](/technologies/test-tools/storybook/api/generators/configuration) instead.