How do I register NGRX provideEffects with Angular 17 standalone?

Question

I'm new to Angular 17 and there's really limited docs as to how to use NGRX with new standalone modules or components.

I've installed ngrx effects:

npm install @ngrx/effects

But now because my application doesn't have an app.modules.ts file I'm struggling to use my effects. Here's my app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideStore } from '@ngrx/store';
import { reducers, metaReducers } from './reducers';
import { provideEffects } from '@ngrx/effects';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideStore(reducers, { metaReducers }), provideEffects()]
};

https://ngrx.io/api/effects/provideEffects

Here's my effect I'm trying to use:

@Injectable()
export class PrioritiesEffects {
  getPriorities$ = createEffect(() =>
    this.actions$.pipe(
      ofType(PrioritiesActions.getPriorities),
      mergeMap(() => {
        return this.prioritiesService.getPriorities().pipe(
          map((priorities) => PrioritiesActions.getPrioritiesSuccess({ priorities })),
          catchError((error) =>
            of(PrioritiesActions.getPrioritiesFailure({ error: error.message }))
          )
        );
      })
    )
  );

  constructor(private actions$: Actions, private prioritiesService: PrioritiesService) {}
}

In the provideEffects they give an example how to use it with the feature on the router, but I'm unsure how to do that?

import { Routes } from '@angular/router';
import { PrioritiesComponent } from './priorities/priorities.component';

export const routes: Routes = [
  { path: 'priority', component: PrioritiesComponent },
];

How do I register NGRX provideEffects with Angular 17 standalone?

Answer 1

Do it like this:

export const routes: Routes = [
  {
    path: 'priority',
    component: PrioritiesComponent,
    providers: [provideState(YourFeatureState), provideEffects([PrioritiesEffects])],
  },
];

Read more here https://www.angulararchitects.io/en/blog/routing-and-lazy-loading-with-standalone-components/