将 translate pipe 注入 NgRx Effect 并抛出 NullInjectorError

Question

I'm Injecting translate pipe to NgRx Effect and it throws NullInjectorError even though the pipe is provided in the module that holds the effect. the package that I'm using for the translation is @ngx-translate/core.

Note: I was able to use the translatePipe in component scope.

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 { }

Answer 1

You need to import the translate module. Docs: https://github.com/ngx-translate/core#sharedmodule

@NgModule({
    imprts: [
        CommonModule,
        TranslateModule
    ]
})
export class SharedModule { }