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/angularWe 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 initSpeaking of lightweight Nx. With Nx v14.2.3 you can now just run
npx nx-DiagrammTo 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:
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=awesomepluginUpdating Nx is done with the following command, updating your dependencies and Nx workspace code to the latest version:
Migrate npx nx lastAfter updating your dependencies, perform the necessary migrations.
npx nx migrar --run-migrationsWe are already following our v15road mapwith lots of cool stuff looming on the horizon.
Make sure you don't miss anything
- follow usno twitter, z
- subscribe to somethingChannel since Youtubefor more information aboutSquare,React,Nx, and more!
- subscribe toour newsletter!
As always, if you are looking for business advice, training and support, learn more about how we work with our clients.Here.