![Using NgRx Standalone APIs with Nx](/posts/ngrx-standalone-with-nx.avif)
Using NgRx Standalone APIs with Nx
Originally posted on February 21, 2023 at blog.nrwl.io
Version 15 of NgRx introduced Standalone APIs to the package, enabling usage of the NgRx with Standalone Component-based Angular applications. This allows for a simpler integration of NgRx to your application.
Nx has added support for using these Standalone APIs from NgRx when generating NgRx stores with our @nrwl/angular:ngrx
generator when you give it a path to a Routes
definition file. (Usually denoted by *.routes.ts
)
In this article, we’ll walk through using Nx to create a new Standalone Component-based Angular application and add NgRx to it, using ONLY Nx Generators!
If you prefer a video, we have one!
Create a new Nx Workspace
npx create-nx-workspace myorg
Select: Standalone Angular app Yes to using Standalone Components Yes to add routing Any option for the stylesheet format Yes to Nx Cloud
The result should look something like this:
Now run cd myorg
to enter the workspace.
The src/main.ts
should look different than you remember with standard NgModule-based Angular applications.
You should see something similar to
import { bootstrapApplication } from '@angular/platform-browser';
import {
provideRouter,
withEnabledBlockingInitialNavigation,
} from '@angular/router';
import { AppComponent } from './app/app.component';
import { appRoutes } from './app/app.routes';
bootstrapApplication(AppComponent, {
providers: [provideRouter(appRoutes, withEnabledBlockingInitialNavigation())],
}).catch((err) => console.error(err));
This is important, as this is the file where your root NgRx providers need to be placed, within the providers
option of the bootstrapApplication
function.
Nx will aid this also!
Generate the root state
nx g @nrwl/angular:ngrx --root --parent=src/main.ts
You’ll be asked for a name for the feature state, but you can ignore this and simply press enter in your terminal, it is not necessary at this stage.
Say false to Facades also.
The generator will now make changes to your main.ts
file and install the NgRx packages for you!
Your main.ts
file should now look like this
import { bootstrapApplication } from '@angular/platform-browser';
import {
provideRouter,
withEnabledBlockingInitialNavigation,
} from '@angular/router';
import { AppComponent } from './app/app.component';
import { appRoutes } from './app/app.routes';
import { provideStore, provideState } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
bootstrapApplication(AppComponent, {
providers: [
provideEffects(),
provideStore(),
provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
],
}).catch((err) => console.error(err));
Notice the addition of provideEffects()
and provideStore()
to the providers
array.
Generate a new feature library
NgRx works better when you split your store based on the features you have within your application. This is a pretty common use case. Nx allows you to do this very easily and in a very structured way.
First, let’s generate a new feature library, called feature-users
, in Nx that will house everything related to our feature including the NgRx State.
nx g @nrwl/angular:lib feature-users --standalone --routing --lazy --parent=src/app/app.routes.ts
This command does a few things:
It creates a new library in our Nx Workspace
It uses an Angular Standalone Component as the entrypoint
It adds a routing configuration to the library and adds the component as the default route.
It will add a lazy-loaded route to the application’s app.routes.ts
file, wiring up the application to the library!
Some files you may want to explore in your own time are:
src/app/app.routes.ts
feature-users/src/lib/lib.routes.ts
Add feature state to the feature library
Now that we have a feature library for our users feature, let’s generate the feature state! It’s as simple as one command.
nx g @nrwl/angular:ngrx users --parent=feature-users/src/lib/lib.routes.ts --route=''
You’ll be asked if this is the root state of the application, enter N
. Then say no to Facades (unless you really want them).
The --route
option here is used to dictate what route
within our routes definition file (lib.routes.ts
) should have the state attached to it. This is to allow the NgRx Standalone APIs to be attached to that route.
We can see that if we look at the lib.routes.ts
file
import { Route } from '@angular/router';
import { FeatureUsersComponent } from './feature-users/feature-users.component';
import { provideStore, provideState } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import * as fromUsers from './+state/users.reducer';
import { UsersEffects } from './+state/users.effects';
export const featureUsersRoutes: Route[] = [
{
path: '',
component: FeatureUsersComponent,
providers: [
provideState(fromUsers.USERS_FEATURE_KEY, fromUsers.usersReducer),
provideEffects(UsersEffects),
],
},
];
The command will also have generated our
| Actions | Reducers | |-----------|----------| | Selectors | Effects |
And with that, we now have NgRx installed and integrated into our application!
If you’d like to confirm the integration, you can run the following commands and see successful outputs!
nx build
nx test
nx test feature-users
Conclusion
This guide has shown how easy it is to set up NgRx with Nx and how to take advantage of the latest Standalone APIs with your application. All with just 5 Nx commands!
With the Angular roadmap pointing to Standalone Components becoming the preferred option for developing Angular applications, this support will be crucial in the future, and Nx will help you achieve it with the best possible DX!
You can checkout an example repository that was created following the steps above here: https://github.com/Coly010/nx-ngrx-standalone
Learn More
- 🧠 Nx Docs
- 👩💻 Nx GitHub
- 💬 Nrwl Community Slack
- 📹 Nrwl Youtube Channel
- 🥚 Free Egghead course
- 🧐 Need help with Angular, React, Monorepos, Lerna or Nx? Talk to us 😃
Also, if you liked this, click the 👏 and make sure to follow Colum and Nx on Twitter for more!