Injecting translate pipe to NgRx Effect and it throws NullInjectorError

323 views Asked by At

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

1

There are 1 answers

2
timdeschryver On

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

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