Problem:
When I try to use pipe in the createEffect method, I get an error saying that pipe is undefined. This is confusing because pipe works perfectly in other parts of my project, such as within my services. What I’ve Tried:
Verified all NgRx and RxJS imports in UsersDataEffects.
Cleared the cache and reinstalled node_modules.
Confirmed that provideEffects is properly configured in main.ts.
Checked Actions to ensure it’s injected correctly (the subscribe in the constructor works as expected).
For registering the ngrx in Angular 18 I did it in Main.ts :
bootstrapApplication(AppComponent, {
providers: [
provideAnimations(),
provideRouter(Routes),
provideHttpClient(),
provideStore(reducers, { metaReducers }),
provideEffects([UsersDataEffects]),
provideToastr(),
...(environment.production ? [] : [
provideStoreDevtools({
maxAge:25,
logOnly: environment.production })])
]
}).catch(err => console.error(err));
And In my User Effects :
@Injectable({
providedIn: 'root'
})
export class UsersDataEffects {
constructor(private actions$: Actions) {
this.actions$.subscribe(action => {
console.log('Action received:', action);
});
}
loadCurrentUsersData$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsersAction.LoadCurrentUsersAction),
// Add a simple log to check if the operator chain works
tap(() => console.log('Effect with pipe triggered'))
)
);
}
Question:
Why am I getting an "undefined" error when using pipe in NgRx effects within an Angular 18 standalone setup? Is there something specific about Angular 18’s standalone or NgRx configuration that might cause this? Any insights would be appreciated!
because we initialize the ngrx in main.ts, so only for Effect files and not other services inside your project we should not get the 'actions$' from injection in the constructor. we should inject it so : private actions$ = inject(Actions);.
Use inject() in Angular 18 for standalone and non-component classes (like effects or pipes).