Angular 17独立组件使用ngrx-store-localstorage构建报错求助

你当前的错误源于NgRx独立组件API中provideStore的配置方式错误——直接用元reducer包裹slice reducer传入provideStore不符合最新API规范，正确做法是通过StoreConfig的metaReducers属性注册元reducer。

修正步骤 #

1. 保留原meta reducer配置（可选，也可简化） #

你的localStorageSyncConfig和localStorageSyncReducer函数无需修改，可直接复用。

2. 修改app.config.ts中的provideStore配置 #

将原来直接传入包裹后的reducer，改为传入reducers对象+包含元reducer的配置：

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    // 修正后的provideStore配置
    provideStore(
      { identity: IdentityReducer }, // 声明各个slice的reducer
      { metaReducers: [localStorageSyncReducer] } // 注册元reducer
    ),
    provideEffects([IdentityEffect]),
    provideStoreDevtools({
      maxAge: 25,
      logOnly: !isDevMode(),
      autoPause: true,
      trace: false,
      traceLimit: 75,
    }),
  ],
};

简化写法（可选） #

如果不想单独定义localStorageSyncReducer函数，也可以直接在metaReducers中生成：

provideStore(
  { identity: IdentityReducer },
  { metaReducers: [localStorageSync(localStorageSyncConfig())] }
),

额外检查点 #

• 确保安装的@ngrx/store和@ngrx/store-localstorage版本与Angular 17兼容（推荐使用NgRx 17.x版本）
• 确认IdentityReducer的定义正确，对应state的identity slice

内容的提问来源于stack exchange，提问作者mohamed souilmi