Argument of type '{ ui: (state: UiState | undefined, action: UiAction) => UiState; }' is not assignable to parameter

[noblemfd]

I am implementing it in Angular-14. Apart from the AppModule, I have CoreModule, SharedModule and AdminModule.

So, in the CoreModule, I have these:

reducer.ts:

import {
  NAVBAR_DARK_VARIANTS,
  NAVBAR_LIGHT_VARIANTS,
  SIDEBAR_DARK_SKINS,
  SIDEBAR_LIGHT_SKINS
} from '../../utils/themes';
import * as Actions from './actions';
import {UiAction} from './actions';
import initialState, {UiState} from './state';

export function uiReducer(state: UiState = initialState, action: UiAction) {
  switch (action.type) {
      case Actions.TOGGLE_SIDEBAR_MENU:
          return {
              ...state,
              menuSidebarCollapsed: !state.menuSidebarCollapsed
          };
      case Actions.TOGGLE_CONTROL_SIDEBAR:
          return {
              ...state,
              controlSidebarCollapsed: !state.controlSidebarCollapsed
          };
      case Actions.TOGGLE_DARK_MODE:
          let variant: string;
          let skin: string;
          if (state.darkMode) {
              variant = NAVBAR_LIGHT_VARIANTS[0].value;
              skin = SIDEBAR_LIGHT_SKINS[0].value;
          } else {
              variant = NAVBAR_DARK_VARIANTS[0].value;
              skin = SIDEBAR_DARK_SKINS[0].value;
          }
          return {
              ...state,
              navbarVariant: variant,
              sidebarSkin: skin,
              darkMode: !state.darkMode
          };
      case Actions.SET_NAVBAR_VARIANT:
          let navbarVariant: string;
          if (state.darkMode) {
              navbarVariant = action.payload || NAVBAR_DARK_VARIANTS[0].value;
          } else {
              navbarVariant =
                  action.payload || NAVBAR_LIGHT_VARIANTS[0].value;
          }
          return {
              ...state,
              navbarVariant
          };
      case Actions.SET_SIDEBAR_SKIN:
          let sidebarSkin: string;
          if (state.darkMode) {
              sidebarSkin = action.payload || SIDEBAR_DARK_SKINS[0].value;
          } else {
              sidebarSkin = action.payload || SIDEBAR_LIGHT_SKINS[0].value;
          }
          return {
              ...state,
              sidebarSkin
          };
      default:
          return state;
  }
}

core.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { StoreModule } from '@ngrx/store';
import { uiReducer } from 'src/app/core/store/ui/reducer';

  imports: [
    CommonModule,
    HttpClientModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    StoreModule.forFeature({ui: uiReducer})
  ],

I got this error:

Argument of type '{ ui: (state: UiState | undefined, action: UiAction) => UiState; }' is not assignable to parameter of type 'FeatureSlice<unknown, Action>'. Object literal may only specify known properties, and 'ui' does not exist in type 'FeatureSlice<unknown, Action>'.ts(2345)

But I changed it to:

StoreModule.forRoot({ui: uiReducer}),

As I tried, then the error becomes:

core.mjs:6362 

ERROR Error: Uncaught (in promise): TypeError: StoreModule.forRoot() called twice. Feature modules should use StoreModule.forFeature() instead.
TypeError: StoreModule.forRoot() called twice. Feature modules should use StoreModule.forFeature() instead.
at Object._provideForRootGuard [as useFactory] (ngrx-store.mjs:1312:15)
at Object.factory (core.mjs:9339:38)
at R3Injector.hydrate (core.mjs:9252:35)

How do I resolve this?