title: node_module error in ngrx store and effects
body: <p>I have like 30 errors in my console after installing <code>ngrx store</code> and <code>ngrx effect</code> and writing my <code>action</code>, <code>reducer</code> and <code>effect</code>.I tried deleting my node_modules, reinstaling all my packages  and some suggestion from <a href="https://stackoverflow.com/questions/58078033/ng-serve-throwing-angular-core-core-has-no-exported-member-eefactorydef">this</a> SO similar issue but its still the same</p>
  <p>This is the error in the console</p>
  <pre><code>ERROR in node_modules/@ngrx/store/src/feature_creator_models.d.ts:3:23 - error TS1005: ']' expected.
  
  3     [K in FeatureName as `select${Capitalize&lt;K&gt;}State`]: MemoizedSelector&lt;AppState, FeatureState&gt;;
                          ~~
  node_modules/@ngrx/store/src/feature_creator_models.d.ts:3:48 - error TS1005: '(' expected.
  
  3     [K in FeatureName as `select${Capitalize&lt;K&gt;}State`]: MemoizedSelector&lt;AppState, FeatureState&gt;;
                                                   ~
  node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:43 - error TS1005: ',' expected.
  
  6     [K in keyof FeatureState &amp; string as `select${Capitalize&lt;K&gt;}`]: MemoizedSelector&lt;AppState, FeatureState[K]&gt;;
                                              ~~~~~~~
  node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:50 - error TS1005: ',' expected.
  
  6     [K in keyof FeatureState &amp; string as `select${Capitalize&lt;K&gt;}`]: MemoizedSelector&lt;AppState, FeatureState[K]&gt;;
                                                     ~
  node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:64 - error TS1005: '(' expected.
  
  6     [K in keyof FeatureState &amp; string as `select${Capitalize&lt;K&gt;}`]: MemoizedSelector&lt;AppState, FeatureState[K]&gt;;
                                                                   ~
  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&lt;State extends infer S ? S : never, Creators&gt;
                ~
  
  ** 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&lt;K&gt;}State`]: MemoizedSelector&lt;AppState, FeatureState&gt;;
                          ~~
  node_modules/@ngrx/store/src/feature_creator_models.d.ts:3:48 - error TS1005: '(' expected.
  
  3     [K in FeatureName as `select${Capitalize&lt;K&gt;}State`]: MemoizedSelector&lt;AppState, FeatureState&gt;;
                                                   ~
  node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:43 - error TS1005: ',' expected.
  
  6     [K in keyof FeatureState &amp; string as `select${Capitalize&lt;K&gt;}`]: MemoizedSelector&lt;AppState, FeatureState[K]&gt;;
                                              ~~~~~~~
  node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:50 - error TS1005: ',' expected.
  
  6     [K in keyof FeatureState &amp; string as `select${Capitalize&lt;K&gt;}`]: MemoizedSelector&lt;AppState, FeatureState[K]&gt;;
                                                     ~
  node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:64 - error TS1005: '(' expected.
  
  6     [K in keyof FeatureState &amp; string as `select${Capitalize&lt;K&gt;}`]: MemoizedSelector&lt;AppState, FeatureState[K]&gt;;
                                                                   ~
  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&lt;State extends infer S ? S : never, Creators&gt;
                ~
  
      
      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&lt;K&gt;}State`]: MemoizedSelector&lt;AppState, FeatureState&gt;;
                              ~~
      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&lt;K&gt;}State`]: MemoizedSelector&lt;AppState, FeatureState&gt;;
                                          ~~~~~~~~~~
      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&lt;K&gt;}State`]: MemoizedSelector&lt;AppState, FeatureState&gt;;
                                                     ~
      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&lt;K&gt;}State`]: MemoizedSelector&lt;AppState, FeatureState&gt;;
                                                        ~~~~~
      node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:43 - error TS2304: Cannot find name 'select$'.
      
      6     [K in keyof FeatureState &amp; string as `select${Capitalize&lt;K&gt;}`]: MemoizedSelector&lt;AppState, FeatureState[K]&gt;;
                                                  ~~~~~~~
      node_modules/@ngrx/store/src/feature_creator_models.d.ts:6:50 - error TS2349: This expression is not callable.
        Type '{ Capitalize&lt;K&gt;(): any; }' has no call signatures.
      
      6     [K in keyof FeatureState &amp; string as `select${Capitalize&lt;K&gt;}`]: MemoizedSelector&lt;AppState, FeatureState[K]&gt;;
                                                         ~~~~~~~~~~~~~~~
      node_modules/@ngrx/store/src/feature_creator.d.ts:2:27 - error TS2305: Module '&quot;./feature_creator_models&quot;' 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&lt;State extends infer S ? S : never, Creators&gt;
             ~~~~~~~
      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&lt;T extends Observable&lt;unknown&gt;[], V&gt;(observablesFactory: (value: V) =&gt; [...T]): OperatorFunction&lt;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&lt;T extends Observable&lt;unknown&gt;[], V&gt;(observablesFactory: (value: V) =&gt; [...T]): OperatorFunction&lt;V, [V, ...{
                                                                                                                                                        ~~~~
      3     [i in keyof T]: ObservedValueOf&lt;T[i]&gt;;
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      4 }]&gt;;
        ~
      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) =&gt; ({
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       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 }) =&gt; ({
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       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) =&gt; {
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       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) =&gt; {
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       58     let newCursor = { ...state.cursors };
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      ... 
       60     return { ...state, cursors: newCursor };
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       61   })
          ~~~~
  </code></pre>
  <p>This is my action.ts</p>
  <pre><code>import { createAction, props } from &quot;@ngrx/store&quot;;
  import { Cursor } from &quot;../../../models/cursor&quot;;
  import { Product } from &quot;../../../models/product&quot;;
  
  export const FetchAllProductFromStore = createAction(
    &quot;[Product Page] Fetch Product From Store&quot;
  );
  export const GetAllProductStart = createAction(
    &quot;[Product Page] Get All Product Start&quot;
  );
  export const GetAllProductSuccess = createAction(
    &quot;[Product Page] Get All Product Success&quot;,
    props&lt;{ product: Product[]; cursors: Cursor; totalProduct: number }&gt;()
  );
  export const GetAllProductFail = createAction(
    &quot;[Product Page] Get All Product Fail&quot;,
    props&lt;{ errorMessage: string }&gt;()
  );
  
  export const ClearBefore = createAction(&quot;[Product Page] Set Before To Empty&quot;);
  
  export const ClearAfter = createAction(&quot;[Product Page] Set After To Empty&quot;);
  </code></pre>
  <p>reducer.ts file</p>
  <pre><code>import { createAction, createReducer, createSelector, on } from &quot;@ngrx/store&quot;;
  import { AppState } from &quot;../../../store/app.reducer&quot;;
  import { Cursor } from &quot;../../../models/cursor&quot;;
  import { Product } from &quot;../../../models/product&quot;;
  import * as productActions from &quot;./product.actions&quot;;
  
  export interface State {
    product: Product[];
    cursors: Cursor;
    totalProduct: number;
    loading: boolean;
    errorMessage: string;
    items_per_page: number;
  }
  export const initialState: State = {
    product: [],
    cursors: {
      after: &quot;&quot;,
      before: &quot;&quot;,
      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 }) =&gt; ({
        ...state,
        product,
        cursors,
        totalProduct,
        loading: false,
        errorMessage: null,
      })
    ),
    on(productActions.GetAllProductStart, (state) =&gt; ({
      ...state,
      loading: true,
      errorMessage: null,
    })),
    on(productActions.GetAllProductFail, (state, { errorMessage }) =&gt; ({
      ...state,
      loading: false,
      errorMessage,
    })),
    on(productActions.ClearBefore, (state) =&gt; {
      let newCursor = { ...state.cursors };
      newCursor.before = &quot;&quot;;
      return { ...state, cursors: newCursor };
    }),
    on(productActions.ClearAfter, (state) =&gt; {
      let newCursor = { ...state.cursors };
      newCursor.after = &quot;&quot;;
      return { ...state, cursors: newCursor };
    })
  );
  
  export const selectProductState = (state: AppState) =&gt; state.product;
  export const selectCursors = createSelector(
    selectProductState,
    (state) =&gt; state.cursors
  );
  
  export const selectproduct = createSelector(
    selectProductState,
    (state) =&gt; state.product
  );
  
  export const selectproductById = createSelector(selectproduct, (state, props) =&gt;
    state.find((product) =&gt; product.id === props.id)
  );
  
  export const selectTotalProduct = createSelector(
    selectProductState,
    (state) =&gt; state.totalProduct
  );
  
  export const selectLoading = createSelector(
    selectProductState,
    (state) =&gt; state.loading
  );
  
  export const selectItemsPerPage = createSelector(
    selectProductState,
    (state) =&gt; state.items_per_page
  );
  </code></pre>
  <p>effect.ts file</p>
  <pre><code>import { Injectable } from &quot;@angular/core&quot;;
  import { Actions, concatLatestFrom, createEffect, ofType } from &quot;@ngrx/effects&quot;;
  import { Store } from &quot;@ngrx/store&quot;;
  import { of } from &quot;rxjs&quot;;
  import { catchError, map, mergeMap, switchMap } from &quot;rxjs/operators&quot;;
  import { StoreService } from &quot;src/app/services/store.service&quot;;
  import { AppState } from &quot;../../../store/app.reducer&quot;;
  import * as productActions from &quot;./product.actions&quot;;
  import * as fromProductReducer from &quot;./product.reducer&quot;;
  
  @Injectable()
  export class ProductEffects {
    constructor(
      private action$: Actions,
      private storeService: StoreService,
      private store: Store&lt;AppState&gt;
    ) {}
    getAllCustomer = createEffect(() =&gt;
      this.action$.pipe(
        ofType(productActions.GetAllProductStart),
        concatLatestFrom(() =&gt;
          this.store.select(fromProductReducer.selectProductState)
        ),
        switchMap(([action, state]) =&gt; {
          return this.storeService.getStoreProduct(9).pipe(
            map((data) =&gt; {
              return productActions.GetAllProductSuccess({
                product: data.results,
                cursors: data.cursors,
                totalProduct: data.total,
              });
            }),
            catchError((error) =&gt; {
              let message;
              console.log(error);
              message = &quot;Error fetching all staff&quot;;
              return of(
                productActions.GetAllProductFail({ errorMessage: message })
              );
            })
          );
        })
      )
    );
  
    getAllCustomerFromStore = createEffect(() =&gt;
      this.action$.pipe(
        ofType(productActions.FetchAllProductFromStore),
        concatLatestFrom(() =&gt;
          this.store.select(fromProductReducer.selectproduct)
        ),
        map(([action, product]) =&gt; {
          if (product.length === 0) {
            return productActions.GetAllProductStart();
          } else {
            return {
              type: &quot;Getting Product From Store&quot;,
            };
          }
        })
      )
    );
  }
  </code></pre>