Bug: TranslocoPersistLangModule with TransferHttpCacheModule does not cache requests when not on default language.

[tiagomoucho3]

Current behavior

We are using Angular Universal with TransferHttpCacheModule and Transloco for translations. Recently we have had to add cookies on server side with the help of some libraries ngx-cookie and ngx-cookie-backend. Everything works fine for other cookies we have set, but we cannot seem to get TranslocoPersistLangModule with cookiesStorage to work. We can see the translocoLang cookie in server.ts set properly, but when we check transloco active lang in app.component.ts it always returns the default one. We are using two languages, pt and en, with the former being the default one.

Expected behavior

When the user changes language, transloco new active lang is set and page is refreshed. We should see the page in the recent set language and not only after making client side requests to request the new language (which should not be being made, because they were already requests once in server side). We are kinda lost and just need someone who can points us in the right direction.

Transloco config

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string) {
    return this.http.get(`${environment.baseUrl}/assets/i18n/${lang}.json`);
  }
}

@NgModule({
  imports: [
    TranslocoMessageFormatModule.init(),
    TranslocoPersistLangModule.init({
      storage: {
        provide: TRANSLOCO_PERSIST_LANG_STORAGE,
        useValue: cookiesStorage(),
      },
    }),
  ],
  exports: [TranslocoModule],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: ['pt', 'en'],
        defaultLang: 'pt',
        fallbackLang: 'pt',
        missingHandler: {
          useFallbackTranslation: true,
        },
        prodMode: environment.production,
      }),
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
  ],
})
export class TranslocoRootModule {}

Environment

- Transloco version: 2.21.0
- Angular version: 12.2.2

Browser:

• [x] Chrome (desktop) version XX
• [ ] Chrome (Android) version XX
• [ ] Chrome (iOS) version XX
• [ ] Firefox version XX
• [ ] Safari (desktop) version XX
• [ ] Safari (iOS) version XX
• [ ] IE version XX
• [ ] Edge version XX