Tim Deschryver for NgRx

Posted on Jun 13 • Edited on Jul 25

Announcing NgRx 18: NgRx Signals is almost stable, ESLint v9 Support, New Logo and Redesign, Workshops, and more!

#ngrx #angular

We are pleased to announce the latest major version of the NgRx framework with some exciting new features, bug fixes, and other updates.

Stable NgRx Signals 🚦 (it's almost there)

Update (2024-07-25): NgRx Signals is officially released, take a look at the Release Post for more info.

In NgRx version 17 we announced NgRx Signals, which was and still is in developer preview.
From the first release Marko Stanimirović further improved and stabilized @ngrx/signals with the help of the community. A special thanks to Rainer Hahnekamp for his thoughts, feedback, and the provided help.

There are still some loose ends that need to be ironed out, but we're planning to officially release a stable version in one of the next minor releases. We're confident that this brings a solid, flexible, and scalable reactive state management solution with good developer ergonomics for Angular Signals.

This means that after a year of hard work, we're getting close to getting @ngrx/signals out of the the developer preview phase.

From the look of it our users are ready for the release, as we're seeing a lot of excitement and positive feedback. The numbers also show that the usage of @ngrx/signals is increasing gradually, hitting 50k downloads per week.

To get started with @ngrx/signals, install the package via one of the commands below and follow the @ngrx/signals Guide.

npm install @ngrx/signals

You can also use the ng add command:

ng add @ngrx/signals

ESLint Plugin support for ESLint v9 🧹

In this release, we've added support for ESLint v9. This means that you can now use the NgRx ESLint plugin with the latest version of ESLint. The plugin is designed to help you write better NgRx code by providing rules that enforce best practices and help you avoid common mistakes for working with packages from the NgRx platform.

We also took the opportunity to update the pre-configured rules to make it easier for you to get started with the plugin, including new new set of rules for @ngrx/signals.
If you're experiencing any issues with the plugin, please check the updated documentation to find the new subdivisions of our rules.

You don't have to worry about the compatibility of the plugin, because we've ensured that this is backwards compatible with older versions of ESLint as well.
If you're interested in using the plugin with ESLint v9, you can import and configure the plugin from @ngrx/eslint-plugin/v9:

const tseslint = require("typescript-eslint");
const ngrx = require("@ngrx/eslint-plugin/v9");

module.exports = tseslint.config({
  files: ["**/*.ts"],
  extends: [
    // 👇 Use all rules or only import the rules for a specific package
    ...ngrx.configs.all,
    ...ngrx.configs.store,
    ...ngrx.configs.effects,
    ...ngrx.configs.componentStore,
    ...ngrx.configs.operators,
    // 🎉 New rules for @ngrx/signals
    ...ngrx.configs.signals,
  ],
  rules: {
    // 👇 Configure specific rules
    "@ngrx/with-state-no-arrays-at-root-level": "warn",
  },
});

If you want to migrate to ESLint v9, we encourage to update Angular ESLint to the latest version (v18) as well.

New NgRx Operators Package 🛠️

In NgRx v17 we introduced the new package @ngrx/operators as a place for common and useful RxJS operators that are used in Angular applications.

The v18 release continues the migration of the concatLatestFrom (from @ngrx/effects) and tapResponse (from @ngrx/component-store) RxJS operators to @ngrx/operators. From NgRx v18 the operators are only available from @ngrx/operators and are no longer part of the @ngrx/effects and @ngrx/component-store packages.

New Logo and Redesign of ngrx.io 💅

If you haven't noticed yet, we've updated the NgRx logo to a new look that follows the new Angular branding.
Many thanks to designs from our community, in the end we decided to go with the design from Robin Goetz, thanks Robin!.
The new logo (in purple and white) can be found on our Press Kit page, so make sure you've updated the logo in your content.

After using our website ngrx.io for a while now, we're thinking that it's time for a redesign.
Behind the scenes Mike Ryan is working on a new version of the NgRx website.

The new website is build up from scratch using Analog.js and will have a brand-new design and revamped content.
This to make sure to offer the best possible experience to our users and to make it easier to find the information you need.
It also ensures that the website will become easier to maintain and update.

Because we're a community-driven project, we're keeping in mind that the website should be easy to contribute to.

Deprecations and Breaking Changes 💥

This release contains bug fixes, deprecations, and breaking changes. For most of these deprecations or breaking changes, we've provided a migration that automatically runs when you upgrade your application to the latest version.

We want to highlight one breaking change in particular, which we expect to have a big impact.
Because we've seen many users import the TypedAction type via a deep import (which is not recommended), we've decided to merge the TypedAction type with the Action type in the @ngrx/store package. If you're using the ng update schematics, the migration automatically updates your imports to use the new location.

Take a look at the version 18 migration guide for complete information regarding migrating to the latest release. The complete CHANGELOG can be found in our GitHub repository.

Upgrading to NgRx 18 🗓️

To start using NgRx 18, make sure to have the following minimum versions installed:

Angular version 18.x
Angular CLI version 18.x
TypeScript version 5.4.x
RxJS version ^6.5.x or ^7.5.x

NgRx supports using the Angular CLI ng update command to update your NgRx packages. To update your packages to the latest version, run the command:

ng update @ngrx/store@l8

If your project uses @ngrx/component-store or @ngrx/signals, but not @ngrx/store, run the following command:

ng update @ngrx/component-store@18
ng update @ngrx/signals@18

NgRx Workshops 🎓

With NgRx usage continuing to grow with Angular, many developers and teams still need guidance on how to architect and build enterprise-grade Angular applications. We are excited to introduce upcoming workshops provided directly by the NgRx team!

We're offering one to three full-day workshops that cover the basics of NgRx to the most advanced topics. Whether your teams are just starting with NgRx or have been using it for a while - they are guaranteed to learn new concepts during these workshops.

The workshop covers both global state with NgRx Store and libraries, along with managing local state with NgRx ComponentStore and NgRx Signals.

Visit our workshops page to sign up from our list of upcoming workshops. The next workshops are scheduled for September 18-20 (US-based time) and October 16-18 (Europe-based time).

Swag Store and Discord Server 🦺

You can get official NgRx swag through our store! T-shirts with the NgRx logo are available in many different sizes, materials, and colors. We will look at adding new items to the store such as stickers, magnets, and more in the future. Visit our store to get your NgRx swag today!

Join our Discord server for those who want to engage with other members of the NgRx community, old and new.

Contributing to NgRx 🥰

We're always trying to improve the docs and keep them up-to-date for users of the NgRx framework. To help us, you can start contributing to NgRx. If you're unsure where to start, come take a look at our contribution guide and watch the introduction video Jan-Niklas Wortmann and Brandon Roberts have made to help you get started

Thanks to all our contributors and sponsors! 🏆

NgRx continues to be a community-driven project. Design, development, documentation, and testing all are done with the help of the community. Visit our community contributors section to see every person who has contributed to the framework.

If you are interested in contributing, visit our GitHub page and look through our open issues, some marked specifically for new contributors. We also have active GitHub discussions for new features and enhancements.

We want to give a big thanks to our Gold sponsor, Nx! Nx has been a longtime promoter of NgRx as a tool for building Angular applications, and is committed to supporting open source projects that they rely on.

We want to thank our Bronze sponsor, House of Angular!

Lastly, we also want to thank our individual sponsors who have donated once or monthly.

If you are interested in sponsoring NgRx, visit our GitHub sponsors page.

Top comments (10)

Konadu Akwasi Akuoko • Jun 14

Congratulations 👏🎉🎉

The ngrx team is making our life easier 🌝

Please as of now I have not seen how to create custom selectors for the ngrx/signal, like using createSelector for the ngrx/state. Is there, or will there be something like this for signals?