0

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

enter image description here

Or Shalmayev
  • 295
  • 1
  • 12
  • is the module that holds your effects lazy loaded ? If so, then perhaps you need to import ngx-translate via additional configuration https://github.com/ngx-translate/core#lazy-loaded-modules – kuldeep Dec 07 '22 at 14:47

1 Answers1

0

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

@NgModule({
    imprts: [
        CommonModule,
        TranslateModule
    ]
})
export class SharedModule { }
timdeschryver
  • 14,415
  • 1
  • 19
  • 32