NullInjectorError: StaticInjectorError(AppModule)[TranslateService -> TranslateStore]

I have the following structure

app.module.ts

@ngModule({
imports: [
// other imports
SharedModule,
TranslateModule.forRoot({
loader: { provide: TranslateLoader, useFactory: createTranslateLoader, deps: [HttpClient] }
})
],
providers: [
// other providers
TranslateService
]
})

export class AppModule { }


shared.module.ts

@ngModule({
declarations: [MyComponent]
imports: [
// other imports
AnotherComponentModule,
TranslateModule.forChild()
],
exports: [MyComponent]
})

export class SharedModule { }


With this setup, I am getting the error

ERROR NullInjectorError: StaticInjectorError(AppModule)[TranslateService -> TranslateStore]: StaticInjectorError(Platform: core)[TranslateService -> TranslateStore]: NullInjectorError: No provider for TranslateStore!

The error started appearing when migrating from Angular 6 to Angular 8.

The error doesnt not appear in components inside that AnotherComponentModule, so somehow it's only in components declared directly in the SharedModule.

When I put the MyComponent in its own module and import it in sharedModule, things start working.

I have tried adding TranslateService and TranslateStore to SharedModule and also the module that contains the component using MyComponent but it didnt work.

Continue reading...