create-sitecore-jss 22.2.0-canary.56 → 22.2.0-canary.58

package/dist/templates/angular/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { APP_ID, NgModule, TransferState } from '@angular/core';
 import { APP_BASE_HREF } from '@angular/common';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import { RoutingModule } from './routing/routing.module';
 import { JssLayoutService } from './layout/jss-layout.service';
 import { AppComponentsModule } from './components/app-components.module';
@@ -22,7 +22,7 @@ import { JssContextService } from './jss-context.service';
         provide: TranslateLoader,
         useFactory: (transferState: TransferState) =>
           new JssTranslationClientLoaderService(new JssTranslationLoaderService(), transferState),
-        deps: [HttpClient, TransferState],
+        deps: [TransferState],
       },
     }),
     AppComponentsModule,

package/dist/templates/angular/src/app/app.server.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, TransferState } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 
@@ -18,11 +18,14 @@ import { JssTranslationServerLoaderService } from './i18n/jss-translation-server
       // <-- *Important* to get translation values server-side
       loader: {
         provide: TranslateLoader,
-        useFactory: (ssrViewBag: {
-          [key: string]: unknown;
-          dictionary: { [key: string]: string };
-        }) => new JssTranslationServerLoaderService(ssrViewBag),
-        deps: ['JSS_SERVER_VIEWBAG'],
+        useFactory: (
+          ssrViewBag: {
+            [key: string]: unknown;
+            dictionary: { [key: string]: string };
+          },
+          transferState: TransferState
+        ) => new JssTranslationServerLoaderService(ssrViewBag, transferState),
+        deps: ['JSS_SERVER_VIEWBAG', TransferState],
       },
     }),
   ],

package/dist/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts

@@ -1,21 +1,22 @@
-import { makeStateKey, Injectable, TransferState } from '@angular/core';
+import { Injectable, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
-import { EMPTY, of } from 'rxjs';
-
-export const dictionaryStateKey = makeStateKey<{ [key: string]: string }>('jssDictionary');
+import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
+import { EMPTY, Observable, of } from 'rxjs';
+import { JssTranslationLoaderService } from './jss-translation-loader.service';
+import { dictionaryStateKey } from './jss-translation-server-loader.service';
 
 @Injectable()
 export class JssTranslationClientLoaderService implements TranslateLoader {
-  constructor(private fallbackLoader: TranslateLoader, private transferState: TransferState) {}
+  constructor(
+    private fallbackLoader: JssTranslationLoaderService,
+    private transferState: TransferState
+  ) {}
 
-  getTranslation(lang: string) {
-    const storedDictionary = this.transferState.get<{ [key: string]: string } | null>(
-      dictionaryStateKey,
-      null
-    );
+  getTranslation(lang: string): Observable<DictionaryPhrases> {
+    const dictionary = this.transferState.get(dictionaryStateKey, null);
 
-    if (storedDictionary !== null && Object.keys(storedDictionary).length > 0) {
-      return of(storedDictionary);
+    if (dictionary) {
+      return of(dictionary);
     }
 
     if (!this.fallbackLoader) {

package/dist/templates/angular/src/app/i18n/jss-translation-server-loader.service.ts

@@ -1,17 +1,29 @@
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, makeStateKey, StateKey, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
+import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
 import { of as observableOf, EMPTY } from 'rxjs';
 
+export const dictionaryStateKey: StateKey<DictionaryPhrases> = makeStateKey<DictionaryPhrases>(
+  'dictionary'
+);
+
 @Injectable()
 export class JssTranslationServerLoaderService implements TranslateLoader {
   constructor(
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
     @Inject('JSS_SERVER_VIEWBAG')
-    private serverViewBag: { [key: string]: unknown; dictionary: { [key: string]: string } }
+    private serverViewBag: { [key: string]: unknown; dictionary: DictionaryPhrases },
+    private transferState: TransferState
   ) {}
   getTranslation(_lang: string) {
     // read initial dictionary from data injected via server.bundle wrapper
     const dictionary = this.serverViewBag.dictionary;
+
+    // set the dictionary in transfer state for the client
+    // since for ng-translate there is no obvious way to pass the server side dictionary to the client
+    // https://github.com/ngx-translate/core/issues/1207#issuecomment-700741671
+    this.transferState.set(dictionaryStateKey, dictionary);
+
     if (dictionary) {
       return observableOf(dictionary);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.2.0-canary.56",
+  "version": "22.2.0-canary.58",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "1f1b0817940ae23d6a883d7aaf308f3452f6cc2a"
+  "gitHead": "0e2e4f8abd1a66edf3a2db32ff8574bb1b72f229"
 }