Fix translate. Create translate loaders: "browser" and "server". Rename BrowserAppModule > AppBrowserModule

Author: Stivin

src/app/app.browser.module.ts

@@ -1,35 +1,52 @@
-import { CookieStorage } from './../forStorage/browser.storage';
-import { AppStorage } from './../forStorage/universal.inject';
-import { BrowserTransferStateModule } from '@angular/platform-browser';
+// angular
 import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, BrowserTransferStateModule, TransferState } from '@angular/platform-browser';
+import { HttpClient } from '@angular/common/http';
+// libs
+import { TransferHttpCacheModule } from '@nguniversal/common';
+import { REQUEST } from '@nguniversal/express-engine/tokens';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+// shared
+import { CookieStorage } from '../forStorage/browser.storage';
+import { AppStorage } from '../forStorage/universal.inject';
+// components
+import { TranslateBrowserLoader } from './translate-browser-loader.service';
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
-import { REQUEST } from '@nguniversal/express-engine/tokens';
+
 // import { ServiceWorkerModule } from '@angular/service-worker';
 
+// the Request object only lives on the server
 export function getRequest(): any {
-  // the Request object only lives on the server
-  const result = { headers: { cookie: document.cookie } };
+  return { headers: { cookie: document.cookie } };
+}
 
-  return result;
+export function exportTranslateStaticLoader(http: HttpClient, transferState: TransferState): TranslateBrowserLoader {
+  return new TranslateBrowserLoader('/assets/i18n/', '.json', transferState, http);
 }
 
 @NgModule({
-  bootstrap: [ AppComponent ],
+  bootstrap: [AppComponent],
   imports: [
-    BrowserModule.withServerTransition({
-      appId: 'my-app'
-    }),
+    BrowserModule.withServerTransition({ appId: 'my-app' }),
+    TransferHttpCacheModule,
     BrowserTransferStateModule,
+    TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useFactory: exportTranslateStaticLoader,
+          deps: [HttpClient, TransferState]
+        }
+      }
+    ),
     // ServiceWorkerModule.register('/ngsw-worker.js'),
     AppModule,
   ],
   providers: [
-     {
-        // The server provides these in main.server
-        provide: REQUEST,
-        useFactory: (getRequest)
+    {
+      // The server provides these in main.server
+      provide: REQUEST,
+      useFactory: (getRequest)
     },
     { provide: AppStorage, useClass: CookieStorage },
     {
@@ -38,4 +55,5 @@ export function getRequest(): any {
     }
   ]
 })
-export class BrowserAppModule {}
+export class AppBrowserModule {
+}

src/app/app.server.module.ts

@@ -1,33 +1,24 @@
-import { UniversalStorage } from './../forStorage/server.storage';
-import { AppStorage } from './../forStorage/universal.inject';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+// angular
 import { NgModule } from '@angular/core';
-import { ServerModule } from '@angular/platform-server';
-import { AppComponent } from './app.component';
-import { AppModule } from './app.module';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/first';
+import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
+import { TransferState } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+// libs
 import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
-import { ServerTransferStateModule } from '@angular/platform-server';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { Observable } from 'rxjs/Observable';
-
-const fs = require('fs');
-
-export class TranslateUniversalLoader implements TranslateLoader {
-  constructor(private prefix: string = 'i18n', private suffix: string = '.json') {
-  }
+import 'rxjs/add/operator/filter';
+import 'rxjs/add/operator/first';
+// shared
+import { UniversalStorage } from '../forStorage/server.storage';
+import { AppStorage } from '../forStorage/universal.inject';
+// components
+import { TranslateServerLoader } from './translate-server-loader.service';
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
 
-  public getTranslation(lang: string): Observable<any> {
-    return Observable.create(observer => {
-      observer.next(JSON.parse(fs.readFileSync(`${this.prefix}/${lang}${this.suffix}`, 'utf8')));
-      observer.complete();
-    });
-  }
-}
 
-export function translateFactory() {
-  return new TranslateUniversalLoader('./dist/assets/i18n', '.json');
+export function translateFactory(transferState: TransferState): TranslateServerLoader {
+  return new TranslateServerLoader('./dist/assets/i18n', '.json', transferState);
 }
 
 @NgModule({
@@ -40,7 +31,8 @@ export function translateFactory() {
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
-        useFactory: translateFactory
+        useFactory: translateFactory,
+        deps: [TransferState]
       }
     }),
   ],
@@ -51,4 +43,5 @@ export function translateFactory() {
     }
   ],
 })
-export class AppServerModule { }
+export class AppServerModule {
+}

src/app/shared/translates/translates.module.ts

@@ -5,20 +5,20 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { TranslatesService } from './translates.service';
 
-export function httpLoaderFactory(http: HttpClient) {
-  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
-}
+// export function httpLoaderFactory(http: HttpClient) {
+//   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+// }
 
 @NgModule({
   imports: [
-    TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useFactory: httpLoaderFactory,
-          deps: [HttpClient]
-        }
-      }
-    )
+    // TranslateModule.forRoot({
+    //     loader: {
+    //       provide: TranslateLoader,
+    //       useFactory: httpLoaderFactory,
+    //       deps: [HttpClient]
+    //     }
+    //   }
+    // )
   ],
   providers: [TranslatesService]
 })

src/app/shared/translates/translates.service.ts

@@ -9,8 +9,8 @@ const DEFAULT_LANG: string = 'en';
 export class TranslatesService {
   constructor(private _translateService: TranslateService,
     @Inject(AppStorage) private appStorage: Storage) {
-    this._translateService.addLangs(LANG_LIST);
-    this._translateService.setDefaultLang(DEFAULT_LANG);
+    // this._translateService.addLangs(LANG_LIST);
+    // this._translateService.setDefaultLang(DEFAULT_LANG);
     this._translateService.use(this.appStorage.getItem('lang') || DEFAULT_LANG);
   }
 

src/app/translate-browser-loader.service.ts

@@ -0,0 +1,28 @@
+// angular
+import { HttpClient } from '@angular/common/http';
+import { makeStateKey, StateKey, TransferState } from '@angular/platform-browser';
+// libs
+import { TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { Observable } from 'rxjs/Observable';
+
+export class TranslateBrowserLoader implements TranslateLoader {
+  constructor(private prefix: string = 'i18n',
+              private suffix: string = '.json',
+              private transferState: TransferState,
+              private http: HttpClient) {
+  }
+
+  public getTranslation(lang: string): Observable<any> {
+    const key: StateKey<number> = makeStateKey<number>('transfer-translate-' + lang);
+    const data = this.transferState.get(key, null);
+    if (data) {
+      return Observable.create(observer => {
+        observer.next(data);
+        observer.complete();
+      });
+    } else {
+      return new TranslateHttpLoader(this.http, this.prefix, this.suffix).getTranslation(lang);
+    }
+  }
+}

src/app/translate-server-loader.service.ts

@@ -0,0 +1,24 @@
+// angular
+import { makeStateKey, StateKey, TransferState } from '@angular/platform-browser';
+// libs
+import { TranslateLoader } from '@ngx-translate/core';
+import { Observable } from 'rxjs/Observable';
+
+const fs = require('fs');
+
+export class TranslateServerLoader implements TranslateLoader {
+  constructor(private prefix: string = 'i18n',
+              private suffix: string = '.json',
+              private transferState: TransferState) {
+  }
+
+  public getTranslation(lang: string): Observable<any> {
+    return Observable.create(observer => {
+      const jsonData = JSON.parse(fs.readFileSync(`${this.prefix}/${lang}${this.suffix}`, 'utf8'));
+      const key: StateKey<number> = makeStateKey<number>('transfer-translate-' + lang);
+      this.transferState.set(key, jsonData);
+      observer.next(jsonData);
+      observer.complete();
+    });
+  }
+}

src/main.browser.ts

@@ -2,12 +2,12 @@ import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { environment } from './environments/environment';
-// import { AppModule } from './app/app.module';
-import { BrowserAppModule } from './app/app.browser.module';
-// import 'hammerjs';
+import { AppBrowserModule } from './app/app.browser.module';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(BrowserAppModule);
+document.addEventListener('DOMContentLoaded', () => {
+  platformBrowserDynamic().bootstrapModule(AppBrowserModule).catch(err => console.log(err));
+});