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)