How can I get type of SignalStore When Separating Store Methods into Different File in an Angular Project Using @ngrx/signals

[Anna-Bober]

I'm working on an Angular project utilizing @ngrx/signals for state management. My goal is to organize my store's methods into separate files for better maintainability and readability. Specifically, I want to extract the withMethods_function from the main store definition file to a separate file and ensure proper typing for the store passed to this function.

Here is how my store is currently defined:

export const OrganizationsStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withEntities({
    entity: type<organization>(),
    collection: 'organizations',
  }),
  withMethods(withMethods_function),
);

I attempted to define the type of the store in the main file and then use it in the separate file where withMethods_function is located:

Main File:

export const OrganizationsType = type<typeof OrganizationsStore>();

Separate File for Store Methods:

import { OrganizationsType } from './_store';

export const withMethods_function = (state: OrganizationsType) => ({
  // Method implementation
});

However, I encountered the following error: 'OrganizationsType' refers to a value, but is being used as a type here. Did you mean 'typeof OrganizationsType'?".

Could someone advise on the correct way to type the state parameter in withMethods_function when it's defined in a separate file? I suspect my approach to exporting and importing the store type might be incorrect.

I want to have the same access to store as if it was in one file.

[chrisjwalk]

This might work for you?

import { StateSignal } from '@ngrx/signals';

Then:

export type OrganizationsType = StateSignal<typeof initialState>;

Or when also using entities:

import { StateSignal } from '@ngrx/signals';
import { EntityState } from '@ngrx/signals/entities';

Then:

export type OrganizationsType = StateSignal<
  typeof initialState & EntityState<organization>
>;

[floAtEbcont]

As I was having the same issue, but @chrisjwalk 's solution didn't work for me in @ngrx/[email protected]:
I think, this may have changed recently. While the StateSignal type still exists, what I needed for this to work is now something like StateSignals<StateModel> & StateSignal<StateModel>.

[rainerhahnekamp]

You can use signalStoreFeature as a wrapper for withMethods or withComputed as described here: https://ngrx.io/guide/signals/signal-store/custom-store-features#creating-a-custom-feature-with-input

Here is also another example: #4272 (comment)

[wwjhu]

Hi @rainerhahnekamp, when using signalStoreFeature to break out methods into a separate file, I am running into the problem that the existing signals from the initial state and added computed signals cannot be accessed. The error shown is

TS2339: Property someId does not exist on type { [STATE_SOURCE]: WritableSignal<{}>;

where someId is a signal. Or is there a way around this?

[wwjhu]

Nevermind, using https://ngrx.io/guide/signals/signal-store/custom-store-features#example-4-defining-computed-props-and-methods-as-input and #4340 (comment) I was able to get this working.

[rainerhahnekamp]

@wwjhu, I can offer you a alternative approach, where you don't have to define the types manually:

https://stackblitz.com/edit/github-ihdcyz?file=src%2Fstore%2Fquiz.store.ts

Let me know what you think.

[wwjhu]

That's a very nice approach for this type of problem. Thanks for sharing it. I think it would make sense to swap 2 and 3 to give the methods access to the computed signals.

[rainerhahnekamp]

Yes, that's then really up to you.