Merge pull request #33 from Stivin/fix_translate

Убрал дерганье при загрузки приложение (повторные запросы для переводов)

Author: Gorniv

src/app/app.browser.module.ts

@@ -1,35 +1,39 @@
-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 } from '@angular/platform-browser';
+// libs
+import { TransferHttpCacheModule } from '@nguniversal/common';
+import { REQUEST } from '@nguniversal/express-engine/tokens';
+// shared
+import { CookieStorage } from '../forStorage/browser.storage';
+import { AppStorage } from '../forStorage/universal.inject';
+// components
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
-import { REQUEST } from '@nguniversal/express-engine/tokens';
+import { TranslatesBrowserModule } from '@shared/translates/translates-browser';
+
 // 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 result;
+  return { headers: { cookie: document.cookie } };
 }
 
 @NgModule({
-  bootstrap: [ AppComponent ],
+  bootstrap: [AppComponent],
   imports: [
-    BrowserModule.withServerTransition({
-      appId: 'my-app'
-    }),
+    BrowserModule.withServerTransition({ appId: 'my-app' }),
+    TransferHttpCacheModule,
     BrowserTransferStateModule,
     // ServiceWorkerModule.register('/ngsw-worker.js'),
     AppModule,
+    TranslatesBrowserModule
   ],
   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 +42,5 @@ export function getRequest(): any {
     }
   ]
 })
-export class BrowserAppModule {}
+export class AppBrowserModule {
+}

src/app/app.module.ts

@@ -1,18 +1,19 @@
-import { AppRoutes } from './app.routing';
+// angular
+import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { TransferHttpModule } from '../modules/transfer-http/transfer-http.module';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+// libs
 import { CookieService } from 'ngx-cookie-service';
-import { HttpClientModule } from '@angular/common/http';
-import { MetaModule, MetaSettings } from '@ngx-meta/core';
-import { MetaLoader } from '@ngx-meta/core';
-import { MetaStaticLoader } from '@ngx-meta/core';
-import { PageTitlePositioning } from '@ngx-meta/core';
+import { MetaLoader, MetaModule, MetaSettings, MetaStaticLoader, PageTitlePositioning, } from '@ngx-meta/core';
 import { PrebootModule } from 'preboot';
+// shared
+import { TransferHttpModule } from '../modules/transfer-http/transfer-http.module';
 import { SharedModule } from '@shared/shared.module';
+// components
+import { AppRoutes } from './app.routing';
+import { AppComponent } from './app.component';
 
 export function metaFactory(): MetaLoader {
   const setting: MetaSettings = {
@@ -50,9 +51,10 @@ export function metaFactory(): MetaLoader {
       provide: MetaLoader,
       useFactory: metaFactory,
       deps: []
-    })
+    }),
   ],
   providers: [CookieService],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/app.server.module.ts

@@ -1,34 +1,18 @@
-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 { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+// libs
+import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
 import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/first';
-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') {
-  }
-
-  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');
-}
+// shared
+import { UniversalStorage } from '../forStorage/server.storage';
+import { AppStorage } from '../forStorage/universal.inject';
+import { TranslatesServerModule } from '@shared/translates/translates-server';
+// components
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
 
 @NgModule({
   imports: [
@@ -37,12 +21,7 @@ export function translateFactory() {
     ServerTransferStateModule,
     ServerModule,
     ModuleMapLoaderModule,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: translateFactory
-      }
-    }),
+    TranslatesServerModule
   ],
   bootstrap: [AppComponent],
   providers: [
@@ -51,4 +30,5 @@ export function translateFactory() {
     }
   ],
 })
-export class AppServerModule { }
+export class AppServerModule {
+}

src/app/shared/shared.module.ts

@@ -1,12 +1,10 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { LayoutsModule } from './layouts/layouts.module';
-import { TranslatesModule } from './translates';
 
 @NgModule({
   exports: [
     LayoutsModule,
-    TranslatesModule
   ],
   providers: []
 })

src/app/shared/translates/index.ts

@@ -1,3 +1,2 @@
-export { TranslatesModule } from './translates.module';
 export { TranslatesService } from './translates.service';
 export { ITranslatesLanguage } from './translates.interface';

src/app/shared/translates/translates-browser/index.ts

@@ -0,0 +1 @@
+export { TranslatesBrowserModule } from './translates-browser.module';

src/app/shared/translates/translates-browser/translates-browser-loader.service.ts

@@ -0,0 +1,27 @@
+import { HttpClient } from '@angular/common/http';
+import { makeStateKey, StateKey, TransferState } from '@angular/platform-browser';
+
+import { TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { Observable } from 'rxjs/Observable';
+
+export class TranslatesBrowserLoaderService 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/shared/translates/translates-browser/translates-browser.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TransferState } from '@angular/platform-browser';
+
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+
+import { TranslatesService } from '@shared/translates/translates.service';
+
+import { TranslatesBrowserLoaderService } from './translates-browser-loader.service';
+
+export function translateStaticLoader(http: HttpClient, transferState: TransferState): TranslatesBrowserLoaderService {
+  return new TranslatesBrowserLoaderService('/assets/i18n/', '.json', transferState, http);
+}
+
+@NgModule({
+  imports: [
+    TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useFactory: translateStaticLoader,
+          deps: [HttpClient, TransferState]
+        }
+      }
+    ),
+  ],
+  providers: [TranslatesService]
+})
+export class TranslatesBrowserModule {
+}

src/app/shared/translates/translates-server/index.ts

@@ -0,0 +1 @@
+export { TranslatesServerModule } from './translates-server.module';

src/app/shared/translates/translates-server/translates-server-loader.service.ts

@@ -0,0 +1,23 @@
+import { makeStateKey, StateKey, TransferState } from '@angular/platform-browser';
+
+import { TranslateLoader } from '@ngx-translate/core';
+import { Observable } from 'rxjs/Observable';
+
+const fs = require('fs');
+
+export class TranslatesServerLoaderService 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();
+    });
+  }
+}