Enable Signal Store Injection at Module Level

[abhidevadiga]

Which @ngrx/* package(s) are relevant/related to the feature request?

signals

Information

As a frontend Angular developer exploring Signal Store, I've identified some missing functionalities that could significantly enhance building large-scale applications.

Current Limitation: From my initial understanding, Signal Store appears to be usable only when injected at the component level. In scenarios where components are rendered only after a valid route guard, leveraging Signal Store becomes challenging. Despite attempts to inject Signal Store at the module level within a route guard, it did not function as expected.

Feature Request: To build a scalable architecture, we need the ability to inject Signal Store at the module level to effectively utilize route events and attach side effects, similar to NgRx/effects. This enhancement would allow us to utilize Signal Store methods like we currently use side effects in NgRx.

Current Issue: This feature seems absent in Signal Store, limiting its usability for loading APIs on initial route events and utilizing signal state at the router guard stage, well before the component injects the Signal Store.

Example:

1. Sample SignalStore
   

2. Limitation: Guards are unable to use BookStore because BookStore is first instantiated at the BookComponent.
   

3. To resolve this, we need a feature that allows SignalStore to be inject in module level:

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[rainerhahnekamp]

@abhidevadiga, you can provide the SignalStore globally. I do that all the time:

export const BookStore = signalStore(
  {providedIn: 'root'},
  withState({})
)

Be aware that NgModules are not really the best fit for a modern Angular application. Nevertheless

export const BookStore = signalStore(
  withState({})
)

@NgModule({
  providers: [BookStore]
})
export class SomeModule {}

will also work.

[abhidevadiga]

I tried this but unfortunately couldn't get the SignalStore to be available at the Guard level. Additionally, I could only find examples online of SignalStore provided at the component level and not on the RouteModule, AppModule, or FeatureModule.

[rainerhahnekamp]

If you provide me a stackblitz with a router, a signalStore and a Module, I can check it out for you.

[abhidevadiga]

While building a Stackblitz with the latest Angular version, I realized that we're still using an older method of bootstrapping modules and setting up route guards. This might be why I'm unable to get the Signal Store instance inside the RouteGuard. I'll switch to the newer Angular bootstrapping method, as well as update the route and guard setup, and then get back.

Be aware that NgModules are not really the best fit for a modern Angular application. -> Can you provide more details or direct me to some useful resource?

[rainerhahnekamp]

Well I meant you should move to standalone components:

• They eliminate the need for a separate element like an NgModule,
• you have all the dependencies of a component in the component
• certain features only work with standalone (defer for example),
• and your tests are also becoming easier because standalone brings it dependencies with it.

Starting with Angular 19, standalone: true will be default. This means you need to explicitly opt-out by setting standalone: false.