ngrx调用createFeatureSelector报参数无法赋值给keyof AppState错误

报错原因 #

该报错明确指向你传入的feature key cachemanagement 没有在全局根状态接口AppState的键列表中注册，不符合TypeScript类型校验规则。

常见遗漏配置排查点 #

• 未在全局AppState中声明对应状态字段 #

  你需要在项目根状态定义文件中，给AppState接口添加cachemanagement字段，类型指定为CacheManagementState：

  // 根状态文件，通常存放于 src/app/state/app.state.ts 或 src/app/core/state/index.ts
  import { CacheManagementState } from './path-to-your-cache-state-file';
  
  export interface AppState {
    // 原有其他功能模块的状态声明，例如：
    // user: UserState;
    // order: OrderState;
    
    // 新增以下声明
    cachemanagement: CacheManagementState;
  }
  

• Feature Reducer注册时key不匹配 #

  你在模块中调用StoreModule.forFeature注册当前feature的reducer时，传入的第一个字符串参数必须和createFeatureSelector中使用的key完全一致，大小写、拼写都不能有差异：

  // CacheManagement 功能模块的 module 文件
  import { NgModule } from '@angular/core';
  import { StoreModule } from '@ngrx/store';
  import * as fromCache from './state/cache-management.reducer';
  
  @NgModule({
    imports: [
      // 这里的第一个参数必须严格等于 'cachemanagement'
      StoreModule.forFeature('cachemanagement', fromCache.reducer)
    ]
  })
  export class CacheManagementModule {}
  

• TypeScript缓存未更新 #

  如果已经完成上述两处配置仍然报错，大概率是TypeScript缓存问题，可以按以下步骤排查：
  1. 重启你的IDE（VSCode/WebStorm等）
  2. 删除项目下的node_modules/.cache文件夹
  3. 执行npx tsc --noEmit校验类型是否真的存在问题

可选临时方案（不推荐） #

如果不需要全局状态类型校验，可以去掉createFeatureSelector的第一个泛型参数AppState，写法如下：

export const selectCacheManagementState = createFeatureSelector<CacheManagementState>('cachemanagement');

该写法可以绕开类型校验，但会丢失NgRx提供的全局状态类型安全能力，只建议临时调试使用。 #

内容的提问来源于stack exchange，提问作者Andrew M