在Angular库中使用ngrx时如何避免重复调用StoreModule.forRoot()

针对你提到的NgRx库初始化冲突问题，有两种成熟的无侵入实现方案，可实现条件化初始化Store模块：

方案1：基于模块的DI检测实现（兼容所有Angular版本） #

核心逻辑是利用Angular依赖注入的Optional()、SkipSelf()装饰器检测全局Store是否已存在，不存在才动态注入根Store的提供者：

• 第一步：调整你的库根模块代码，通过ModuleWithProviders动态配置提供者

import { NgModule, Optional, SkipSelf, ModuleWithProviders } from '@angular/core';
import { StoreModule, Store } from '@ngrx/store';
import { yourFeatureReducers } from './lib-features/reducers';

// 条件注入根Store的工厂函数
function getRootStoreProviders(existStore?: Store) {
  return existStore ? [] : (StoreModule.forRoot({}).providers ?? []);
}

@NgModule({
  imports: [
    // 你的Feature reducer直接正常注册，不依赖根Store初始化时机
    StoreModule.forFeature('yourLibNamespace', yourFeatureReducers)
  ]
})
export class YourLibBaseModule {
  constructor(@Optional() @SkipSelf() parentModule?: YourLibBaseModule) {
    // 常规校验：避免库根模块被多次导入
    if (parentModule) {
      throw new Error('YourLibBaseModule has been loaded already, please import it only in root AppModule.');
    }
  }

  static forRoot(): ModuleWithProviders<YourLibBaseModule> {
    return {
      ngModule: YourLibBaseModule,
      providers: [
        {
          provide: 'YOUR_LIB_NGRX_ROOT_PROVIDERS',
          useFactory: getRootStoreProviders,
          deps: [[new Optional(), Store]]
        }
      ]
    };
  }
}

• 第二步：使用者仅需在根AppModule的导入数组中添加YourLibBaseModule.forRoot()即可，无需额外手动导入StoreModule.forRoot([])，已集成NgRx的项目也不会出现二次初始化报错。

方案2：基于独立API实现（适配Angular 14+） #

如果你的库面向Angular 14及以上版本，可使用更简洁的独立提供者写法：

import { makeEnvironmentProviders, EnvironmentProviders, Optional } from '@angular/core';
import { provideStore, Store, provideState } from '@ngrx/store';
import { yourFeatureReducers } from './lib-features/reducers';

export function provideYourLib(): EnvironmentProviders {
  return makeEnvironmentProviders([
    // 条件注册根Store
    {
      provide: Store,
      useFactory: (existingStore?: Store) => existingStore ?? provideStore({}),
      deps: [[new Optional(), Store]]
    },
    // 注册你的Feature状态
    provideState('yourLibNamespace', yourFeatureReducers)
  ]);
}

使用者直接在根配置文件app.config.ts的providers数组中加入provideYourLib()即可，两种场景都能兼容。

额外注意点 #

• 如果你的库还依赖NgRx的Effects、DevTools等扩展，可复用相同的条件检测逻辑做注册
• 若使用者需要自定义NgRx根配置（如metaReducer、运行时检查规则），可正常自行调用StoreModule.forRoot()，你的库不会覆盖已有配置

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