NG0201: No provider found for `InjectionToken @ngrx/store Root Store Provider`

I have a basic setup of NgRX to learn the flow.

Now it gets to use the NgRX Effects, and my implementations throw error, Please review and let me know what may missed?

"dependencies": { "@angular/common": "^21.0.0", "@angular/compiler": "^21.0.0", "@angular/core": "^21.0.0", "@angular/forms": "^21.0.0", "@angular/platform-browser": "^21.0.0", "@angular/router": "^21.0.0", "@ngrx/effects": "^21.0.0", "@ngrx/store": "^21.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0" },

I added the effects to my app.config.ts like this

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideHttpClient } from '@angular/common/http'; import { provideEffects } from '@ngrx/effects'; import { provideStore } from '@ngrx/store'; import { routes } from './app.routes'; import { itemReducer } from './counter/state/reducer'; import { PeopleEffects } from './swapi/sw/state/effects'; import { peopleListReducer } from './swapi/sw/state/reducer'; export const appConfig: ApplicationConfig = { providers: [ provideBrowserGlobalErrorListeners(), provideRouter(routes), provideHttpClient(), provideStore({ itemStateInStore: itemReducer, peopleStateInStore: peopleListReducer }), provideEffects([PeopleEffects]), ] };

Effects.ts

import { HttpClient } from "@angular/common/http"; import { Injectable } from "@angular/core"; import { Actions, createEffect, ofType } from "@ngrx/effects"; import { API_URL } from "api.config"; import { catchError, map, of, switchMap } from "rxjs"; import { peopleGet, peopleGetFailure, peopleGetSuccess } from "./actions"; @Injectable() export class PeopleEffects { constructor( private actions$: Actions, private http: HttpClient ){} loadPeople$ = createEffect(() => this.actions$.pipe( ofType(peopleGet), switchMap(() => this.http.get<any>(API_URL + '/people').pipe( map(data => peopleGetSuccess({ people: data.results, total: data.results.length, count: data.results.length, }) ), catchError(error => of(peopleGetFailure({error}))) ) ) )) }

Actions.ts

import { createAction, props } from "@ngrx/store"; import { People } from "./model"; export const peopleGet = createAction("People[] Get list of people") export const peopleGetSuccess = createAction( "[People] get success", props<{people: People[], total: number, count: number}>() ) export const peopleGetFailure = createAction( "[People] Get Failure", props<{error: any}>() )

Reducer.ts

import { createReducer, on } from "@ngrx/store"; import { peopleGet, peopleGetFailure, peopleGetSuccess } from "./actions"; import { initialPeopleState } from "./state"; export const peopleListReducer = createReducer( initialPeopleState, on(peopleGet, (state) => { console.log("Reducer triggered ", state); return { ...state }; }), on(peopleGetSuccess, (state, { people, total }) => { return { ...state, people, total, page: 1 }; }), on(peopleGetFailure, (state) => { return { ...state }; }) );

selector.ts

import { createFeatureSelector, createSelector } from "@ngrx/store"; import { PeopleState } from "./state"; export const selectPeopleState = createFeatureSelector<PeopleState>('peopleStateInStore'); export const selectPeople = createSelector( selectPeopleState, (state: PeopleState) => state.people ); export const selectPeopleTotal = createSelector( selectPeopleState, (state: PeopleState) => state.total ); export const selectPeoplePage = createSelector( selectPeopleState, (state: PeopleState) => state.page ); And my component import { AsyncPipe, CommonModule } from '@angular/common'; import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs'; import { peopleGet } from './state/actions'; import { People } from './state/model'; import { selectPeople } from './state/selector'; @Component({ selector: 'app-sw', imports: [ FormsModule, CommonModule, AsyncPipe, ], templateUrl: './sw.html', styleUrl: './sw.css', }) export class Sw implements OnInit{ private store = inject(Store) peoples$!: Observable<People[]>; constructor( ) {} ngOnInit(): void { this.peoples$ = this.store.select(selectPeople); this.getPeople(); } getPeople() { this.store.dispatch(peopleGet()) } }