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",
};
}
})
)
);
}
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