Standalone APIs with NgRx and Angular 15

Standalone APIs were added to version 15 of NgRx, allowing for easier usage of NgRx with Standalone Components in Angular.
They must be added to routes definitions as they need to be added to the Environment Injector (https://ngrx.io/api/store/provideStore).

Nx will use these Standalone APIs when:

  1. Standalone APIs are supported
  2. Angular 15 is installed

This guide will show you how to leverage this using the NgRx generator.

Prerequisites

Before following along with this guide, ensure you have:

  1. An Nx >= 15.6.0 Workspace with @nx/angular installed
  2. Angular 15 must be installed

Steps

  1. Generate an Angular application with Standalone Components and routing
nx g @nx/angular:app testapp --standalone --routing
Nx 15 and lower use @nrwl/ instead of @nx/
  1. Generate NgRx Root State
nx g @nx/angular:ngrx --root --parent=testapp/src/main.ts
Nx 15 and lower use @nrwl/ instead of @nx/
  1. Generate NgRx Feature State
nx g @nx/angular:ngrx users --parent=testapp/src/app/app.routes.ts
Nx 15 and lower use @nrwl/ instead of @nx/