Nx 14.2 — Angular v14, storybook update, lightweight Nx, and more. (2023)

Nx 14.2 — Angular v14, storybook update, lightweight Nx, and more. (1)

Another version full of cool features and improvements has just been released:Nx 14.2. Read all about the included Angular v14 update, TypeScript and other third-party package updates, improved Angular CLI for Nx migrations, optionalnx.jsonand speed improvements.

Angular v14 was released just last week. Read all aboutthe news here. Kudos and congratulations to the Angular team for the timely resubmission based on their 6 month major release cycle. We've been working closely with the team over the past few weeks to test the first RCs, provide feedback on upcoming features and most importantly ensure that the new version not only works well on Nx, but is supported on the broader Nx ecosystem as well , like Jest, ESLint, Storybook, Cypress and more.

We are excited about the new features of Angular v14, which bring a breath of fresh air and long-overdue innovations to the framework (*cough* standalone components, *cough* typed Angular forms).

So if you are on Nx 14.2 (Migrate npx nx last), Nx will also trigger any migration scripts related to Angular v14 to update your workspace to the latest version of Angular.

With this release we also automatically update:

Nx 14.2 automatically updates Storybook to the latest version 6.5 for you.

Storybook support has been around in Nx for a long time, and we have pre-configured our custom executor (builder) Storybook to work best in an Angular Monorepo setup. We are happy that the storybook support for Angular has improved a lot in the last s.t versions. we canNow use Storybook's native builders for Angular directly(@storybook/angular:start-storybook,@storybook/angular:build-storybook). At that timeproject.json(orworkspace.json/angle.json) you should see that the executor is now set to:

"story book": {
"executor": "@storybook/angular:start-storybook",

This avoids potential disadvantages of different or unavailable options and reduces maintenance on our end for the future.

Storybook 6.5 also adds support for using TS-based Storybook configuration files such asmain.ts,Preview.tsetc. We've added support for this to our storybook configuration generators.

See the introduction for all the other cool Storybook featuresNotice.

Not only is Nx great for large mono repos, but it also works great for Angular single project workspaces! Why switch to Nx? We need a whole blog post for this (spoiler: coming soon 😉), but in short:

  • everything from the Angular CLI still works
  • You get faster builds, test runs, linting, etc., aided by Nx job scheduling and caching
  • more schematics (we call them generators in Nx) with specific support for SCAM, NgRX configuration, module federation and micro frontend configuration and much more (looking at their standalone components)
  • Better out-of-the-box integration with community tools like Jest for unit testing, ESLint, Cypress, Storybook,...
  • improved developer experience with technologyNx Console VSCode extension

In the last few weeks we have been working hard to make an automated migration from Angular CLI to Nx as seamless as possible. And that can be difficult, trust me. We've always had automated migrations, but we've improved the existing ones, and on top of that, we've also added support for Angular CLI workspaces from different projects.

All you have to do is run the following command in your existing Angular CLI configuration.

to add @nrwl/angular

We try to infer and automatically migrate your current configuration, as well as provide helpful alerts and logs for things we couldn't migrate along the way, giving you the chance to tweak things manually.

Here is Nrwlian Colum tweeting about it

When configuring a new Nx workspace, you can choose from a variety of presets (templates) that optimally preconfigure your workspace and already configure tools such as Prettier, Jest, ESLint and Cypress. However, for some people this may seem like too much.

For that, Nx has always had what we call “Nx Core” setup. You can read more about itthis in our guide, but basically allows using Nx without its plugins, just for fast and powerful job scheduling and caching features.

In v14 we already simplified Nx (we have a whole section onour launch blog post) and in v14.2 we go even further:We madenx.jsonOptional, providing some reasonable default values. Now, if you want to add Nx's powerful task scheduler to an existing repository, all you have to do is add thenxPackage as a dependency and you're done.

Whenever you need to tweak the default settings, you can run the following command to create anx.jsongenerated or of course you can create it manually:

npx nx init

Speaking of lightweight Nx. With Nx v14.2.3 you can now just run

npx nx-Diagramm

To download the Nx package, let it parse your monorepo's project diagram and visualize it in its powerful project diagram UI. Take the chance. Here's Victor demonstrating the Next.js and Babel.js repositories!

Some of our team has had their heads down in Lerna since last monthtook over the administration of Lerna. Alongside the release of Lerna 5 with major package updates, we wanted to address Lerna's biggest problem: being slow.We publish an articleabout how we envisioned this strategy 2 weeks ago and as part of that we're digging into the core of Nx and doing some proper profiling.

The result: Nx itself also got faster 😃.

Here is the result of running our benchmark with the latest version of Nx 14.2:

* The average runtime is: 10203.6
* The average turbo time is: 1532.3
* The average time of lerna (powered by nx) is: 272.2
* The average nx time is: 194.8
* nx is 52.379876796714576x faster than lage
* nx is 7.866016427104722x faster than Turbo
* nx is 1.3973305954825461x faster than lerna (powered by nx)

(As alwaysplay here)

Only the possibility of being able to adapt and individualize the processes and behavior of your monorepo tooling to your own needs makes the work pleasant and lets you make the best of it. Whether it's adapting the code generation aspect to your company's coding style guide and best practices, automating the setup of new projects, or even adding support for languages ​​like Go, .Net or Flutter.Plugins NxEnable such support and really help to make Nx as good as possible for your current scenario.

Support for the Nx plugin has been around for a while. Just visit usNx Community Plugins Page. And we keep improving it. We've added support forNx plugin presetserecently also the ability of local plugins. In this version we have added the corresponding oneLinting support for Nx plugin development.

Has it ever happened to you that you put the implementation file in yourjson generatorsthe configuration file of your plugin? Well guess what, now the linting process would warn you about:

Nx 14.2 — Angular v14, storybook update, lightweight Nx, and more. (2)

When generating a new Nx plugin, you must have a@nrwl/nx/nx-plugin-checkssetting on your.eslintrc.jsonFile.

"Files": [./package.json", "./generators.json", "./executors.json"],
"parser": "jsonc-eslint-parser",
"Rules": {
"@nrwl/nx/nx-plugin-checks": "Fehler"

If you have an existing plugin, you can run the following generator to add the new lint rules:

npx nx g @nrwl/nx-plugin:plugin-lint-checks --projectName=awesomeplugin

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

Migrate npx nx last

After updating your dependencies, perform the necessary migrations.

npx nx migrar --run-migrations

We are already following our v15road mapwith lots of cool stuff looming on the horizon.

Make sure you don't miss anything

As always, if you are looking for business advice, training and support, learn more about how we work with our clients.Here.

Top Articles
Latest Posts
Article information

Author: Ray Christiansen

Last Updated: 05/12/2023

Views: 6247

Rating: 4.9 / 5 (49 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Ray Christiansen

Birthday: 1998-05-04

Address: Apt. 814 34339 Sauer Islands, Hirtheville, GA 02446-8771

Phone: +337636892828

Job: Lead Hospitality Designer

Hobby: Urban exploration, Tai chi, Lockpicking, Fashion, Gunsmithing, Pottery, Geocaching

Introduction: My name is Ray Christiansen, I am a fair, good, cute, gentle, vast, glamorous, excited person who loves writing and wants to share my knowledge and understanding with you.