@ngrx/signals: No provider for SignalStore

[pavankjadda]

I am trying to use ngrx signals and I see error in consoleError: R3InjectorError(Environment Injector)[SignalStore -> SignalStore]: NullInjectorError: No provider for SignalStore!

See the reproduction here: https://stackblitz.com/edit/stackblitz-starters-s2mw8f?file=src%2Fmain.ts

[pavankjadda]

This is for the people facing similar issue and looking for 101 of the Signal Store. Add EmployeeStore to providers in the component and it will solve the issue.

@Component({
	selector: 'app-employee-component',
	standalone: true,
	imports: [],
	providers: [EmployeeStore],
	templateUrl: './employee.component.html',
})
export class EmployeeComponent implements OnInit {
employeeStore=inject(EmployeeStore);
}

Global Store:

Specifying { providedIn: 'root' }will define it in root context and will create global EmployeeStore. This can be used in any component without adding in providers

export const EmployeeStore = signalStore({ providedIn: 'root' }, withState(initialState));

[KylerJohnsonDev]

It's important to note that this answer may not work as expected. This answer will get rid of the error, but it turns the signal store into a global, singleton (meaning that every injector gets the same instance of the signal store), which may or may not be what you want.

If you want the signal store state to be local to a single component, you need add that to the providers array in the decorator of that component. If you want the signal store state to be local to a route tree (e.g. all components under the /users route to get the same instance), add your signal store to a providers array in the route configuration object for that route.

[pavankjadda]

You are right, I generally global store to prevent duplicate providers in multiple components. I will update the answer.