How to use withDevtools with a class based signal store that extends signalStore

[Jagan-P]

I have this class based signalStore,

import { Injectable, computed, inject } from '@angular/core';
import { pipe, shareReplay } from 'rxjs';
import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { switchMap, tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class HardwareDeviceDetailsStore extends signalStore(
  withState(initialState),
  withMethods((store, hardwareDeviceService = inject(HardwareDeviceService)) => ({
    loadDeviceDetails: rxMethod<string>(
      pipe(
        tap(() => patchState(store, { isLoading: true, hasError: null })),
        switchMap((deviceId) =>
          hardwareDeviceService.getHardwareDeviceVariantGroupsById(deviceId).pipe(
            tap((response) => {
              if (response.error) {
                patchState(store, { hasError: true, isLoading: false });

                return;
              }

              patchState(store, { data: response.result, isLoading: false });
            }),
            shareReplay(1),
          ),
        ),
      ),
    ),
    clearDeviceDetails: () => patchState(store, { data: null, isLoading: false, hasError: false }),
  })),
  
) {}

Upon adding withDevtools I see there are some type issues.

import { Injectable, computed, inject } from '@angular/core';
import { pipe, shareReplay } from 'rxjs';
import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { switchMap, tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class HardwareDeviceDetailsStore extends signalStore(
  withState(initialState),
  withMethods((store, hardwareDeviceService = inject(HardwareDeviceService)) => ({
    loadDeviceDetails: rxMethod<string>(
      pipe(
        tap(() => patchState(store, { isLoading: true, hasError: null })),
        switchMap((deviceId) =>
          hardwareDeviceService.getHardwareDeviceVariantGroupsById(deviceId).pipe(
            tap((response) => {
              if (response.error) {
                patchState(store, { hasError: true, isLoading: false });

                return;
              }

              patchState(store, { data: response.result, isLoading: false });
            }),
            shareReplay(1),
          ),
        ),
      ),
    ),
    clearDeviceDetails: () => patchState(store, { data: null, isLoading: false, hasError: false }),
  })),
  withDevtools("store")
) {}

'extends' clause of exported class 'HardwareDeviceDetailsStore' has or is using private name 'SIGNAL'.ts(4020)

[abhijit-chikane]

import { withDevtools } from '@angular-architects/ngrx-toolkit';
use it like storeFeature and I have added condition as I don't want it to use it in production

[rainerhahnekamp]

@Jagan-P, do you also get the error without. withDevtools()?

[Jagan-P]

import { withDevtools } from '@angular-architects/ngrx-toolkit'; use it like storeFeature and I have added condition as I don't want it to use it in production

@abhijit-chikane your example is not a class based signalStore. Mine is a class based signal store.

[Jagan-P]

@Jagan-P, do you also get the error without. withDevtools()?

@rainerhahnekamp no I don't see any errors once I remove the withDevtools(). Will create a fiddle or plunkr to reproduce this.

[rainerhahnekamp]

Will create a fiddle or plunkr to reproduce this.

Yes please. Do that.