NgRx Effect注入TranslatePipe触发NullInjectorError问题求助

在NgRx Effect中注入TranslatePipe时触发了NullInjectorError，尽管该管道已在存放Effect的模块中声明为提供者。使用的翻译包为@ngx-translate/core，且组件作用域内可正常使用TranslatePipe。

相关代码 #

module.ts

@NgModule({
    declarations: [
        OptimizationTabMainComponent,
    ],
    imports: [
        OptimizationTabRoutingModule,
        SharedModule,
        TranslateModule,
        StoreModule,
        StoreModule.forFeature(StoreFeatures.Optimization, optimizationReducers),
        EffectsModule.forFeature([OptimizationMainEffects]),

    ],
    providers: [
        TranslatePipe
    ]
})
class OptimizationTabModule { }

export {OptimizationTabModule};

effect.ts

@Injectable()
export class OptimizationMainEffects {
    constructor(        
        private translateService: TranslatePipe,
    ) {
    }
}

app.module.ts

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        AppRoutingModule,
        SharedModule,
        TranslateModule.forRoot({
            defaultLanguage: 'en',
            loader:          {
                provide:    TranslateLoader,
                useClass: LazyTranslateLoader
            },
            isolate: true
        }),
]
...

shared.module.ts

const importsExports = [
    CommonModule,
    FlexModule,
    TranslateModule,
    FlexLayoutModule,
    NotificationsModule,
    ComponentsModule,
    MatExpansionModule,
    MatCardModule,
    MatIconModule,
    MatTooltipModule
];

@NgModule({
    imports: importsExports,
    exports: importsExports
})
export class SharedModule { }

解决方案 #

核心原因

TranslatePipe是Angular管道，设计用于模板中转换数据，它依赖Angular的模板渲染上下文，并不适合在服务/Effect这类注入器环境中直接实例化注入。正确的做法是使用@ngx-translate/core提供的TranslateService来在非模板场景（如Effect、服务）中处理翻译逻辑。

修复步骤

1. 移除模块中对TranslatePipe的提供者声明
   在OptimizationTabModule的providers数组中删除TranslatePipe，管道无需在providers中注册（组件模板使用时只需确保模块导入TranslateModule即可）：

   @NgModule({
       declarations: [
           OptimizationTabMainComponent,
       ],
       imports: [
           OptimizationTabRoutingModule,
           SharedModule,
           TranslateModule,
           StoreModule,
           StoreModule.forFeature(StoreFeatures.Optimization, optimizationReducers),
           EffectsModule.forFeature([OptimizationMainEffects]),
       ],
       providers: [
           // 移除 TranslatePipe
       ]
   })
   class OptimizationTabModule { }
   

2. 在Effect中注入TranslateService替代TranslatePipe
   修改OptimizationMainEffects，注入TranslateService并使用其API完成翻译：

   import { TranslateService } from '@ngx-translate/core';
   
   @Injectable()
   export class OptimizationMainEffects {
       constructor(        
           private translateService: TranslateService,
       ) {
           // 同步获取翻译文本
           const translatedText = this.translateService.instant('YOUR_TRANSLATION_KEY');
           // 异步获取翻译文本（适合懒加载或动态语言切换场景）
           this.translateService.get('YOUR_TRANSLATION_KEY').subscribe(text => {
               // 处理翻译后的文本
           });
       }
   }
   

3. 确认TranslateModule的导入正确性
   确保SharedModule已导入并导出TranslateModule（当前代码已满足），且根模块AppModule通过TranslateModule.forRoot()完成了全局配置，这样所有子模块都能正常使用TranslateService。

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