fix dictionary api call during ssr

Sitecore · Sep 13, 2024 · 72bf48e · 72bf48e
1 parent 3fab1ea
commit 72bf48e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/app.module.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/app.module.ts
@@ -20,7 +20,8 @@ import { JssContextService } from './jss-context.service';
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
-        useFactory: () => new JssTranslationClientLoaderService(new JssTranslationLoaderService()),
+        useFactory: (transferState: TransferState) =>
+          new JssTranslationClientLoaderService(new JssTranslationLoaderService(), transferState),
         deps: [HttpClient, TransferState],
       },
     }),

diff --git a/...-sitecore-jss/src/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts b/...-sitecore-jss/src/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts
@@ -1,16 +1,23 @@
-import { makeStateKey, Injectable } from '@angular/core';
+import { makeStateKey, Injectable, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
-import { EMPTY } from 'rxjs';
+import { EMPTY, of } from 'rxjs';
 
-export const dictionaryStateKey = makeStateKey('jssDictionary');
+export const dictionaryStateKey = makeStateKey<{ [key: string]: string }>('jssDictionary');
 
 @Injectable()
 export class JssTranslationClientLoaderService implements TranslateLoader {
-  constructor(
-    private fallbackLoader: TranslateLoader,
-  ) { }
+  constructor(private fallbackLoader: TranslateLoader, private transferState: TransferState) {}
 
   getTranslation(lang: string) {
+    const storedDictionary = this.transferState.get<{ [key: string]: string } | null>(
+      dictionaryStateKey,
+      null
+    );
+
+    if (storedDictionary !== null && Object.keys(storedDictionary).length > 0) {
+      return of(storedDictionary);
+    }
+
     if (!this.fallbackLoader) {
       return EMPTY;
     }