Angular: 'translate' pipe not working in another Module

I have created a I18nModule:

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
  exports: [TranslateModule]
})
export class I18nModule {

}

I have created also an TranslationService:

@Injectable({
  providedIn: 'root',
})
export class TranslationService {
  constructor(private translate: TranslateService) {}

  init(): void {
    // Retrieve the selected language from session storage, if it exists
    const storedLang = sessionStorage.getItem('selectedLang');
    // Add supported languages and their translation files
    this.translate.addLangs(['en', 'it']);
    this.translate.use(storedLang ? storedLang : 'en'); // Set default language if none is stored 
  }

  setLanguage(lang: string): void {
    this.translate.use(lang); // Switch the language
  }

  getLanguages(): string[]{
    return this.translate.getLangs();
  }
}

I also provide the Service in providers array in App.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    AdminLayoutComponent
  ],
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    RouterModule,
    ComponentsModule,
    AppRoutingModule,
    BrowserModule,
    AppRoutingModule,
    SharedModule
  ],
  providers: [TranslationService],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private translationService: TranslationService) {
    this.translationService.init(); // Initialize the translation service
  }
}

I have successfully translated one label in the navbar component (which is associated with components.module.ts that is imported in app.module.ts), where I also injected the TranslationService to create a button to switch the language.

All good till now, but I have another module, named tables.module.ts, in which I have the component NgxDatatablesComponent where I want to put a label in, in order to be translated.

@NgModule({
  declarations: [NgxDatatablesComponent, SortableComponent, TablesComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(TablesRoutes),
    NgxDatatableModule,
    ProgressbarModule.forRoot(),
    BsDropdownModule.forRoot(),
    PaginationModule.forRoot(),
    TooltipModule.forRoot(),
    NgxPrintModule,
    I18nModule
  ]
})
export class TablesModule {}

I have imported the I18nModule in TablesModule, like I did in ComponentsModule, the 'translate' pipe is founded, but is not translating anything.
I have to mention that there is no problem with .json, there is no typo or something like that.

Any suggestions on why it's not working?

Right now I18nModule and TranslationService both are independent.

TranslationService is injected in the root module.

I18nModule is imported in the ComponentsModule

I18nModule is also imported in the TablesModule

If you want to TranslationService to be available in the TablesModule, either use

providers: [TranslationService], in I18nModule so that any module that imports I18nModule TranslationService would be available as providers.

Or a naive approach to add

providers: [TranslationService], in TablesModule