Let's get ready to migrate!

Announcing NgRx 4 – Angular with reactive flavor

Jane Elizabeth
© Shutterstock / Jack Yu

Good news, everyone! The team behind NgRx has announced their latest release – NgRx 4 – to match the newest version of Angular. Lazy loading, simplified testing, and even a redesigned router integration.

Last week, Victor Savkin of the NgRx core team announced a shiny new release for NgRx. This updated version includes support for lazy loading, simplified testing, and a redesigned router integration. There’s even instrumentation for a “powerful time-travelling debugger” worthy of the new Doctor.

For those of us who haven’t heard of it before, NgRx provides a set of clean, well-tested libraries for reactive programming in Angular applications. Specifically, it’s a suite of libraries that empower Angular developers to be more effective at building large projects. Cool, right?

NgRx is taking a page from Angular’s book and dropping version number 3 in favor of skipping straight to 4. (I’m sure you all remember why Angular did that.) It has become something of a semi-official management library for Angular and a crucial part of the Angular ecosystem. The NgRx team thinks it’ll be easier to keep everything straight if they align their version numbers with the core Angular release numbers. Fair enough.

What’s in the new release?

There’s a couple of interesting improvements about the new release.

The update has official support for lazy loading. Previously, it was possible to do lazy loading with NgRx, but now it’s much easier for everyone involved. Similar to the Angular router, NgRx uses forRoot for the main NgModule, and forFeature for a lazy-loaded one.

Another goal for NgRx was improved and simplified testing. They hit that mark with a clear separation between the UI, state management, and side effects. They’ve also simplified testing RxJS observables with marble testing.

See more: On the road to Angular 5: 4.3 is here

Finally, one of the main improvements in NgRx 4 had to do with state management. Making sure that NgRx and the router worked well together was a “high priority”. Previously, the issue with NgRx 2 router integration was that they were synchronized after the fact, making it hard for resolvers and guards to access the new state. Basically useless, right? NgRx’s store couldn’t cancel the navigation.

To fix this issue, the NgRx dev team has made the Angular router more pluggable. In addition, they’ve redesigned the integration process to make sure that the store update is part of the navigation process.

Learn More

The folks over at NgRx have put together an extremely helpful migration guide to ease the way from Version 2 to Version 4. Find it here!

Jane Elizabeth
Jane Elizabeth is an assistant editor for

Inline Feedbacks
View all comments