Angular 18无模块架构下如何在NGRX Effect中使用独立Pipe

问题背景 #

我正在将应用迁移至Angular 18，并逐步转为独立组件架构，当前优先迁移NGRX Store。此前基于NgModule架构时，我通过StoreModule导入特性模块，其中两个模块依赖SomePipe。

现在我通过index.ts中的makeEnvironmentProviders统一收集特性模块的提供者，代码如下：

const buildStore = () => makeEnvironmentProviders([
  provideFeature1(),
  provideFeature2(),
  // ...其他特性
  makeEnvironmentProviders([
    provideStoreState({ name: 'feature-10', reducer }),
    provideEffects(effects),
  ])
]);

部分Effects（作为服务）依赖已转为独立形式的SomePipe。在NgModule时代，只需在对应特性模块中导入该Pipe即可实现作用域隔离；但现在如果把Pipe加入makeEnvironmentProviders，它会被注册到app.config成为全局可用，无法做到仅在特定特性范围内生效。

需求：在当前独立架构下，如何实现该Pipe的作用域隔离？（注：虽然不建议在Effects中使用Pipe，但项目必须保留此实现）

解决方案 #

1. 为特性模块单独绑定Pipe与Effects #

不要将Pipe放到全局的buildStore集合中，而是在每个依赖该Pipe的特性提供者函数里，单独注册Pipe和对应的Effects，确保它们的作用域仅限于当前特性：

// feature1/index.ts
export const provideFeature1 = () => makeEnvironmentProviders([
  provideStoreState({ name: 'feature-1', reducer: feature1Reducer }),
  provideEffects(Feature1Effects),
  // 仅在feature1的提供者中注册Pipe
  { provide: SomePipe, useClass: SomePipe }
]);

// feature2/index.ts同理
export const provideFeature2 = () => makeEnvironmentProviders([
  provideStoreState({ name: 'feature-2', reducer: feature2Reducer }),
  provideEffects(Feature2Effects),
  { provide: SomePipe, useClass: SomePipe }
]);

每个特性的Pipe实例都是独立的，仅在当前特性的依赖注入树中可用，不会全局暴露。

2. 使用特性专属令牌实现严格隔离 #

如果需要彻底避免跨特性的Pipe实例冲突，可以为每个特性创建专属的注入令牌，让Effects依赖对应令牌的Pipe实例：

// feature1/tokens.ts
export const FEATURE1_SOME_PIPE = new InjectionToken<SomePipe>('FEATURE1_SOME_PIPE');

// feature1/index.ts
export const provideFeature1 = () => makeEnvironmentProviders([
  provideStoreState({ name: 'feature-1', reducer: feature1Reducer }),
  provideEffects(Feature1Effects),
  { provide: FEATURE1_SOME_PIPE, useClass: SomePipe }
]);

// Feature1Effects中注入专属令牌
@Injectable()
export class Feature1Effects {
  constructor(@Inject(FEATURE1_SOME_PIPE) private somePipe: SomePipe) {}
  // ...effect逻辑
}

这种方式从依赖注入层面限定了Pipe的作用域，隔离性更强。

3. 临时适配：将Pipe包装为特性专属服务 #

如果不想修改Pipe的注册逻辑，可以把Pipe封装成仅属于当前特性的服务，让Effects依赖这个服务而非Pipe本身：

// feature1/services/some-pipe.service.ts
@Injectable()
export class Feature1SomePipeService {
  private pipe = new SomePipe();
  transform(value: any) {
    return this.pipe.transform(value);
  }
}

// feature1/index.ts
export const provideFeature1 = () => makeEnvironmentProviders([
  provideStoreState({ name: 'feature-1', reducer: feature1Reducer }),
  provideEffects(Feature1Effects),
  Feature1SomePipeService
]);

// Feature1Effects中注入服务
@Injectable()
export class Feature1Effects {
  constructor(private somePipeService: Feature1SomePipeService) {}
  // 使用时调用this.somePipeService.transform(...)
}

这个方案无需修改Pipe本身，通过服务封装快速实现作用域隔离，适合现有代码的快速适配。

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