Problem with loading literals at application startup

[marcoranica94]

Hello everyone,

I am experiencing an issue with translating the header of a table in an Angular application. I am using Angular version 17 and the latest version of Transloco.

Context:

I have an application with a table, and the setup is as follows:

Application Bootstrap:

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

AppComponent:

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  imports: [
    RouterOutlet,
    FlexibilityModule,
    HttpClientModule,
    TranslocoModule
  ]
})
export class AppComponent {
  title = 'table-view';
}

appConfig:

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withFetch()),
    provideTransloco({
      config: {
        availableLangs: SUPPORTED_LANGUAGES,
        defaultLang: DEFAULT_LANGUAGE,
        prodMode: !isDevMode(),
      },
      loader
    }),
  ]
};

Problem:

The table component is created in a service, including its header and data. The creation occurs in the service's constructor. However, the table's header is not being translated despite using translocoService.translate.

I have observed that even though translocoService is instantiated, it does not contain the translation labels at the time of the table's creation. By implementing a delay (timeout) of 2 seconds before the construction of the table, the translations are applied correctly. This suggests that the translation labels are loaded after the component's creation. The same issue occurs if I move the table creation logic into the ngOnInit method instead of the constructor.

Questions:

1. Is there a way to ensure that Transloco has loaded all the labels before the table component is created?
2. Could this be an issue related to Angular's component lifecycle or a specificity of Transloco that I am overlooking?

Thank you in advance for any insights or solutions you might provide.

[marcoranica94]

@shaharkazaz Do you maybe know something more regarding this topic?

[shaharkazaz]

@marcoranica94

1. You can use the app initializer and wait for the relevant translations to load
2. As written in the comment here, if you are using the service.translate you are responsible for the translation to be ready, you can use the asynchronous translation that will only fire one he has the translations ready.

These are very general guidelines, but if you provide a minimal reproduction link that would be easier to assist.