node_module error in ngrx store and effects

Question

I have like 30 errors in my console after installing ngrx store and ngrx effect and writing my action, reducer and effect.I tried deleting my node_modules, reinstaling all my packages and some suggestion from this SO similar issue but its still the same

This is the error in the console

ERROR in node_modules/@ngrx/store/src/feature_creator_models.d.ts:3:23 - error TS1005: ']' expected.

3     [K in FeatureName as `select${Capitalize<K>}State`]: MemoizedSelector<AppState, FeatureState>;
                        ~~
node_modules/@ngrx/store/src/feature_creator_models.d.ts:3:48 - error TS1005: '(' expected.

3     [K in FeatureName as `select${Capitalize<K>}State`]: MemoizedSelector<AppState, FeatureState>;
                                                 ~
node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:43 - error TS1005: ',' expected.

6     [K in keyof FeatureState & string as `select${Capitalize<K>}`]: MemoizedSelector<AppState, FeatureState[K]>;
                                            ~~~~~~~
node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:50 - error TS1005: ',' expected.

6     [K in keyof FeatureState & string as `select${Capitalize<K>}`]: MemoizedSelector<AppState, FeatureState[K]>;
                                                   ~
node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:64 - error TS1005: '(' expected.

6     [K in keyof FeatureState & string as `select${Capitalize<K>}`]: MemoizedSelector<AppState, FeatureState[K]>;
                                                                 ~
node_modules/@ngrx/store/src/feature_creator_models.d.ts:10:1 - error TS1160: Unterminated template literal.

10 
   
node_modules/@ngrx/store/src/reducer_creator.d.ts:31:16 - error TS1005: ',' expected.

31     ...creators: Creators,
  [0m                ~
node_modules/@ngrx/store/src/reducer_creator.d.ts:32:12 - error TS1005: ',' expected.

32     reducer: OnReducer<State extends infer S ? S : never, Creators>
              ~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2022-05-17T22:20:19.163Z - Hash: 5d6dd197e257e319596f
5 unchanged chunks

Time: 701ms

ERROR in node_modules/@ngrx/store/src/feature_creator_models.d.ts:3:23 - error TS1005: ']' expected.

3     [K in FeatureName as `select${Capitalize<K>}State`]: MemoizedSelector<AppState, FeatureState>;
                        ~~
node_modules/@ngrx/store/src/feature_creator_models.d.ts:3:48 - error TS1005: '(' expected.

3     [K in FeatureName as `select${Capitalize<K>}State`]: MemoizedSelector<AppState, FeatureState>;
                                                 ~
node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:43 - error TS1005: ',' expected.

6     [K in keyof FeatureState & string as `select${Capitalize<K>}`]: MemoizedSelector<AppState, FeatureState[K]>;
                                            ~~~~~~~
node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:50 - error TS1005: ',' expected.

6     [K in keyof FeatureState & string as `select${Capitalize<K>}`]: MemoizedSelector<AppState, FeatureState[K]>;
                                                   ~
node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:64 - error TS1005: '(' expected.

6     [K in keyof FeatureState & string as `select${Capitalize<K>}`]: MemoizedSelector<AppState, FeatureState[K]>;
                                                                 ~
node_modules/@ngrx/store/src/feature_creator_models.d.ts:10:1 - error TS1160: Unterminated template literal.

10 
   
node_modules/@ngrx/store/src/reducer_creator.d.ts:31:16 - error TS1005: ',' expected.

31     ...creators: Creators,
  [0m                ~
node_modules/@ngrx/store/src/reducer_creator.d.ts:32:12 - error TS1005: ',' expected.

32     reducer: OnReducer<State extends infer S ? S : never, Creators>
              ~

    
    ERROR in node_modules/@ngrx/store/src/feature_creator_models.d.ts:3:23 - error TS2304: Cannot find name 'as'.
    
    3     [K in FeatureName as `select${Capitalize<K>}State`]: MemoizedSelector<AppState, FeatureState>;
                            ~~
    node_modules/@ngrx/store/src/feature_creator_models.d.ts:3:35 - error TS2304: Cannot find name 'Capitalize'.
    
    3     [K in FeatureName as `select${Capitalize<K>}State`]: MemoizedSelector<AppState, FeatureState>;
                                        ~~~~~~~~~~
    node_modules/@ngrx/store/src/feature_creator_models.d.ts:3:46 - error TS2304: Cannot find name 'K'.
    
    3     [K in FeatureName as `select${Capitalize<K>}State`]: MemoizedSelector<AppState, FeatureState>;
                                                   ~
    node_modules/@ngrx/store/src/feature_creator_models.d.ts:3:49 - error TS2304: Cannot find name 'State'.
    
    3     [K in FeatureName as `select${Capitalize<K>}State`]: MemoizedSelector<AppState, FeatureState>;
                                                      ~~~~~
    node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:43 - error TS2304: Cannot find name 'select$'.
    
    6     [K in keyof FeatureState & string as `select${Capitalize<K>}`]: MemoizedSelector<AppState, FeatureState[K]>;
                                                ~~~~~~~
    node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:50 - error TS2349: This expression is not callable.
      Type '{ Capitalize<K>(): any; }' has no call signatures.
    
    6     [K in keyof FeatureState & string as `select${Capitalize<K>}`]: MemoizedSelector<AppState, FeatureState[K]>;
                                                       ~~~~~~~~~~~~~~~
    node_modules/@ngrx/store/src/feature_creator.d.ts:2:27 - error TS2305: Module '"./feature_creator_models"' has no exported member 'NestedSelectors'.
    
    2 import { FeatureSelector, NestedSelectors } from './feature_creator_models';
                                ~~~~~~~~~~~~~~~
    node_modules/@ngrx/store/src/reducer_creator.d.ts:31:8 - error TS2304: Cannot find name 'creators'.
    
    31     ...creators: Creators,
              ~~~~~~~~
    node_modules/@ngrx/store/src/reducer_creator.d.ts:32:5 - error TS2304: Cannot find name 'reducer'.
    
    32     reducer: OnReducer<State extends infer S ? S : never, Creators>
           ~~~~~~~
    node_modules/@ngrx/effects/src/concat_latest_from.d.ts:2:113 - error TS2574: A rest element type must be an array type.
    
    2 export declare function concatLatestFrom<T extends Observable<unknown>[], V>(observablesFactory: (value: V) => [...T]): OperatorFunction<V, [V, ...{
                                                                                                                      ~~~~
    node_modules/@ngrx/effects/src/concat_latest_from.d.ts:2:145 - error TS2574: A rest element type must be an array type.
    
    2 export declare function concatLatestFrom<T extends Observable<unknown>[], V>(observablesFactory: (value: V) => [...T]): OperatorFunction<V, [V, ...{
                                                                                                                                                      ~~~~
    3     [i in keyof T]: ObservedValueOf<T[i]>;
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    4 }]>;
      ~
    src/app/components/products/store/product.reducer.ts:31:3 - error TS2554: Expected 4 arguments, but got 2.
    
     31   on(
          ~~~
     32     productActions.GetAllProductSuccess,
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ... 
     40     })
        ~~~~~~
     41   ),
        ~~~
    src/app/components/products/store/product.reducer.ts:42:3 - error TS2554: Expected 4 arguments, but got 2.
    
     42   on(productActions.GetAllProductStart, (state) => ({
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     43     ...state,
        ~~~~~~~~~~~~~
    ... 
     45     errorMessage: null,
        ~~~~~~~~~~~~~~~~~~~~~~~
     46   })),
        ~~~~~
    src/app/components/products/store/product.reducer.ts:47:3 - error TS2554: Expected 4 arguments, but got 2.
    
     47   on(productActions.GetAllProductFail, (state, { errorMessage }) => ({
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     48     ...state,
        ~~~~~~~~~~~~~
    ... 
     50     errorMessage,
        ~~~~~~~~~~~~~~~~~
     51   })),
        ~~~~~
    src/app/components/products/store/product.reducer.ts:52:3 - error TS2554: Expected 4 arguments, but got 2.
    
     52   on(productActions.ClearBefore, (state) => {
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     53     let newCursor = { ...state.cursors };
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ... 
     55     return { ...state, cursors: newCursor };
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     56   }),
        ~~~~
    src/app/components/products/store/product.reducer.ts:57:3 - error TS2554: Expected 4 arguments, but got 2.
    
     57   on(productActions.ClearAfter, (state) => {
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     58     let newCursor = { ...state.cursors };
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ... 
     60     return { ...state, cursors: newCursor };
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     61   })
        ~~~~

This is my action.ts

import { createAction, props } from "@ngrx/store";
import { Cursor } from "../../../models/cursor";
import { Product } from "../../../models/product";

export const FetchAllProductFromStore = createAction(
  "[Product Page] Fetch Product From Store"
);
export const GetAllProductStart = createAction(
  "[Product Page] Get All Product Start"
);
export const GetAllProductSuccess = createAction(
  "[Product Page] Get All Product Success",
  props<{ product: Product[]; cursors: Cursor; totalProduct: number }>()
);
export const GetAllProductFail = createAction(
  "[Product Page] Get All Product Fail",
  props<{ errorMessage: string }>()
);

export const ClearBefore = createAction("[Product Page] Set Before To Empty");

export const ClearAfter = createAction("[Product Page] Set After To Empty");

reducer.ts file

import { createAction, createReducer, createSelector, on } from "@ngrx/store";
import { AppState } from "../../../store/app.reducer";
import { Cursor } from "../../../models/cursor";
import { Product } from "../../../models/product";
import * as productActions from "./product.actions";

export interface State {
  product: Product[];
  cursors: Cursor;
  totalProduct: number;
  loading: boolean;
  errorMessage: string;
  items_per_page: number;
}
export const initialState: State = {
  product: [],
  cursors: {
    after: "",
    before: "",
    hasNext: false,
    hasPrevious: false,
  },
  totalProduct: 0,
  loading: false,
  errorMessage: null,
  items_per_page: 5,
};

export const productReducer = createReducer(
  initialState,
  on(
    productActions.GetAllProductSuccess,
    (state, { product, cursors, totalProduct }) => ({
      ...state,
      product,
      cursors,
      totalProduct,
      loading: false,
      errorMessage: null,
    })
  ),
  on(productActions.GetAllProductStart, (state) => ({
    ...state,
    loading: true,
    errorMessage: null,
  })),
  on(productActions.GetAllProductFail, (state, { errorMessage }) => ({
    ...state,
    loading: false,
    errorMessage,
  })),
  on(productActions.ClearBefore, (state) => {
    let newCursor = { ...state.cursors };
    newCursor.before = "";
    return { ...state, cursors: newCursor };
  }),
  on(productActions.ClearAfter, (state) => {
    let newCursor = { ...state.cursors };
    newCursor.after = "";
    return { ...state, cursors: newCursor };
  })
);

export const selectProductState = (state: AppState) => state.product;
export const selectCursors = createSelector(
  selectProductState,
  (state) => state.cursors
);

export const selectproduct = createSelector(
  selectProductState,
  (state) => state.product
);

export const selectproductById = createSelector(selectproduct, (state, props) =>
  state.find((product) => product.id === props.id)
);

export const selectTotalProduct = createSelector(
  selectProductState,
  (state) => state.totalProduct
);

export const selectLoading = createSelector(
  selectProductState,
  (state) => state.loading
);

export const selectItemsPerPage = createSelector(
  selectProductState,
  (state) => state.items_per_page
);

effect.ts file

import { Injectable } from "@angular/core";
import { Actions, concatLatestFrom, createEffect, ofType } from "@ngrx/effects";
import { Store } from "@ngrx/store";
import { of } from "rxjs";
import { catchError, map, mergeMap, switchMap } from "rxjs/operators";
import { StoreService } from "src/app/services/store.service";
import { AppState } from "../../../store/app.reducer";
import * as productActions from "./product.actions";
import * as fromProductReducer from "./product.reducer";

@Injectable()
export class ProductEffects {
  constructor(
    private action$: Actions,
    private storeService: StoreService,
    private store: Store<AppState>
  ) {}
  getAllCustomer = createEffect(() =>
    this.action$.pipe(
      ofType(productActions.GetAllProductStart),
      concatLatestFrom(() =>
        this.store.select(fromProductReducer.selectProductState)
      ),
      switchMap(([action, state]) => {
        return this.storeService.getStoreProduct(9).pipe(
          map((data) => {
            return productActions.GetAllProductSuccess({
              product: data.results,
              cursors: data.cursors,
              totalProduct: data.total,
            });
          }),
          catchError((error) => {
            let message;
            console.log(error);
            message = "Error fetching all staff";
            return of(
              productActions.GetAllProductFail({ errorMessage: message })
            );
          })
        );
      })
    )
  );

  getAllCustomerFromStore = createEffect(() =>
    this.action$.pipe(
      ofType(productActions.FetchAllProductFromStore),
      concatLatestFrom(() =>
        this.store.select(fromProductReducer.selectproduct)
      ),
      map(([action, product]) => {
        if (product.length === 0) {
          return productActions.GetAllProductStart();
        } else {
          return {
            type: "Getting Product From Store",
          };
        }
      })
    )
  );
}

Answer 1

My Error: error: node_modules/@ngrx/store/src/models.d.ts:1:10 - error ts2305: module '"@angular/core"' has no exported member 'importedngmoduleproviders'.

My version of angular is 13, so I downgraded my version of ngrx "@ngrx/store": "^13.2.0" "@ngrx/store-devtools": "^13.2.0"

Answer 2

Make sure your @ngrx/store (and other ngrx modules) version corresponds your Angular version. I ran into this error when I installed latest ngrx (13.2.0) with angular 10 onboard