Creating a signal store using anything more than initialState hides all signals and exposed methods

[bh3605]

Which @ngrx/* package(s) are the source of the bug?

signals

Minimal reproduction of the bug/regression with instructions

Working example

type BooksState = {
  books: string[];
  isLoading: boolean;
  filter: { query: string; order: 'asc' | 'desc' };
};

const initialBooksState: BooksState = {
  books: [],
  isLoading: false,
  filter: { query: '', order: 'asc' },
};

export const BooksStore = signalStore(
  withState(initialBooksState)
);

@Component({
  selector: 'my-app',
  standalone: true,
  providers: [BooksStore],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  readonly books = inject(BooksStore);
  constructor() {
    // can see the exposed signals -> this.books.
  }

}

Broken

type BooksState = {
  books: string[];
  isLoading: boolean;
  filter: { query: string; order: 'asc' | 'desc' };
};

const initialBooksState: BooksState = {
  books: [],
  isLoading: false,
  filter: { query: '', order: 'asc' },
};

export const BooksStore = signalStore(
  withState(initialBooksState),
  withComputed(({ books, filter }) => ({
    booksCount: computed(() => books().length),
    sortedBooks: computed(() => {
      return books();
    })
  })),
);

@Component({
  selector: 'my-app2',
  standalone: true,
  providers: [BooksStore],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class ApComponent {
  readonly books = inject(BooksStore);
  constructor() {
    this.books.
  }

}

Expected behavior

It's expected to expose all the additional computed properties and methods when withComputed and/or withMethods are used in the store creation.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s)

NgRx: 17.2.0
Angular: 17.3.0

Other information

No response

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

• Yes
• No

[rainerhahnekamp]

Uhm, honestly speaking, that is very unlikely. You can try to reconstruct it in Stackblitz NgRx Signal Store StackBlitz example, but I can already tell you that it is working.

Please check for typos, wrong imports in your example. Also, please be aware that the first stable version is 18.

[bh3605]

Figured it out. This was just a VSCode Typescript version problem. Needed to point to my workspace (node_modules) instead of VSCode. VsCode is usting Typescript 4.3.5 while my workspace is using 5.4.5

I was really worried! Phew.