Angular 18 Support SSR

[aparzi]

Is translation supported for Angular 18 SSR?

[cskiwi]

It seems to work. however for me it renders the translations on server side, then when the client loads it in it re loads the translations, causing a small flicker.

Might be my configuration

[aparzi]

Hi @cskiwi,
It seems to work for me too. Flickering effect should it could depend hydration process of Angular.

[cskiwi]

Indeed was some configuration on my part. all is resolved now

[KariNarhi28]

@cskiwi Could you at least share that fix for others?

I am suffering from that flickering too.

[aparzi]

Hi @KariNarhi28,
can you share the code? Because flickering effect depends on Hydration process of Angular. I don't think that an issue of ngx-translate

[cskiwi]

@KariNarhi28 and @aparzi. it's hard to narrow down the exact fix because it didn't bother me that much and did some other changes first and eventually it was resolved.

If I would guess it would have been one of the following changes:

I had my own Transtion Module that intializes everything with a .forRoot(config). I removed that and switched to:

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch(), withInterceptorsFromDi()),
    importProvidersFrom(
      TranslateModule.forRoot(
        provideTranslation({
          api: `/api/v1/translate/i18n/`,
        }),
      ),
    )
  ]
}

with the following provider:

export const provideTranslation = (config: ITranslateConfig) => ({
  defaultLanguage: 'en',
  useDefaultLang: true,
  loader: {
    provide: TranslateLoader,
    useFactory: (http: HttpClient, baseUrl: string) =>
      new TranslateHttpLoader(http, baseUrl + config.api, ''),
    deps: [HttpClient, BASE_URL],
  },
});

I also moved my languageIntializer to the privders in the app.config.ts.
However none of these should have impact this

[aparzi]

@cskiwi you should add provideClientHydration() in app.module. More informations in this guide: https://angular.dev/guide/hydration.

[cskiwi]

@aparzi it is there :) i just didn't copy all my providers. But still thanks for spotting that!