I created an NgRx following the documentation here: https://ngrx.io/guide/store/feature-creators

import { createFeature, createReducer, on } from '@ngrx/store';
import { UserAppAccessGranted } from '../models/user-app-access-granted.model';
import { LoadingState } from '@frontend/data-access/shared-models';
import {
    createUserAppAccessGranted,
    createUserAppAccessGrantedSuccess,
    getUserAppAccessGrantedSuccess,
    patchUserAppAccessGranted,
    patchUserAppAccessGrantedSuccess,
} from './user-app-access-granted.actions';

interface UserAppAccessGrantedState {
    userAppAccessGranted: UserAppAccessGranted[];
    loadingState: LoadingState;
}

const initialState: UserAppAccessGrantedState = {
    userAppAccessGranted: [],
    loadingState: LoadingState.INIT,
};

export const userAppAccessGrantedFeature = createFeature({
    name: 'userAppAccessGranted',
    reducer: createReducer(
        initialState,
        on(
            createUserAppAccessGranted,
            patchUserAppAccessGranted,
            (state): UserAppAccessGrantedState => ({
                ...state,
                loadingState: LoadingState.LOADING,
            }),
        ),
        on(
            getUserAppAccessGrantedSuccess,
            (state, action): UserAppAccessGrantedState => ({
                ...state,
                userAppAccessGranted: action.userAppAccessGranted,
                loadingState: LoadingState.LOADED,
            }),
        ),
        on(
            createUserAppAccessGrantedSuccess,
            (state, action): UserAppAccessGrantedState => ({
                ...state,
                userAppAccessGranted: [...state.userAppAccessGranted, action.userAppAccessGranted],
                loadingState: LoadingState.LOADED,
            }),
        ),
        on(
            patchUserAppAccessGrantedSuccess,
            (state, action): UserAppAccessGrantedState => ({
                ...state,
                userAppAccessGranted: state.userAppAccessGranted.map((appAccess) =>
                    appAccess.id === action.userAppAccessGranted.id
                        ? { ...appAccess, ...action.userAppAccessGranted }
                        : appAccess,
                ),
                loadingState: LoadingState.LOADED,
            }),
        ),
    ),
    extraSelectors: ({ selectUserAppAccessGranted }) => ({
        selectUserHasFreeAccess: createSelector(selectUserAppAccessGranted, (userAppAccess) => {
            return userAppAccess.some((userAppAccessGranted) => userAppAccessGranted.expiryTimestamp > Date.now());
        }),
    }),
});

The reducer gives the error:

Argument type {extraSelectors: ({selectUserAppAccessGranted}: {selectUserAppAccessGranted: any}) => {selectUserHasFreeAccess: any}, name: "userAppAccessGranted", reducer: ActionReducer<FeatureState>} is not assignable to parameter type FeatureConfig<"userAppAccessGranted", {extraSelectors: ({selectUserAppAccessGranted}: {selectUserAppAccessGranted: any}) => {selectUserHasFreeAccess: any}, name: "userAppAccessGranted", reducer: ActionReducer<FeatureState>}> & {extraSelectors: ExtraSelectorsFactory<"userAppAccessGranted", {extraSelectors: ({selectUserAppAccessGranted}: {selectUserAppAccessGranted: any}) => {selectUserHasFreeAccess: any}, name: "userAppAccessGranted", reducer: ActionReducer<FeatureState>}, {selectUserHasFreeAccess: any}>} & NotAllowedFeatureStateCheck<{extraSelectors: ({selectUserAppAccessGranted}: {selectUserAppAccessGranted: any}) => {selectUserHasFreeAccess: any}, name: "userAppAccessGranted", reducer: ActionReducer<FeatureState>}>

Also, the default selectors I would expect to see such as selectUserAppAccessGranted and selectLoadingState are not available in other selectors. This is the case even if I remove the extra selectors to prevent the reducer from erroring.

This is happening with us trying to upgrade from NgRx 7 to NgRx 8 and Angular 18 from 17.