feat:add MissingTranslationHandler

Author: Gorniv

src/app/home/home.component.html

@@ -1,2 +1,3 @@
 <h1>{{ "home.title" | translate }}</h1>
-<p>{{ "home.text" | translate }}</p>
+<p>{{ "home.text" | translate }}</p>
+<p>{{ "home.notranslatewarn" | translate }}</p>

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

@@ -2,28 +2,36 @@ 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 { TranslateLoader, TranslateModule, MissingTranslationHandler } from '@ngx-translate/core';
 
-import { TranslatesService } from '@shared/translates/translates.service';
+import {
+  TranslatesService,
+  CommonMissingTranslationHandler,
+} from '@shared/translates/translates.service';
 
 import { TranslatesBrowserLoaderService } from './translates-browser-loader.service';
 
-export function translateStaticLoader(http: HttpClient, transferState: TransferState): TranslatesBrowserLoaderService {
+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]
-        }
-      }
-    ),
+      missingTranslationHandler: {
+        provide: MissingTranslationHandler,
+        useClass: CommonMissingTranslationHandler,
+      },
+      loader: {
+        provide: TranslateLoader,
+        useFactory: translateStaticLoader,
+        deps: [HttpClient, TransferState],
+      },
+    }),
   ],
-  providers: [TranslatesService]
+  providers: [TranslatesService],
 })
-export class TranslatesBrowserModule {
-}
+export class TranslatesBrowserModule {}

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

@@ -1,9 +1,16 @@
 import { NgModule } from '@angular/core';
 import { TransferState } from '@angular/platform-browser';
 
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import {
+  TranslateLoader,
+  TranslateModule,
+  MissingTranslationHandler,
+} from '@ngx-translate/core';
 
-import { TranslatesService } from '@shared/translates/translates.service';
+import {
+  TranslatesService,
+  CommonMissingTranslationHandler,
+} from '@shared/translates/translates.service';
 
 import { TranslatesServerLoaderService } from './translates-server-loader.service';
 
@@ -14,14 +21,17 @@ export function translateFactory(transferState: TransferState): TranslatesServer
 @NgModule({
   imports: [
     TranslateModule.forRoot({
+      missingTranslationHandler: {
+        provide: MissingTranslationHandler,
+        useClass: CommonMissingTranslationHandler,
+      },
       loader: {
         provide: TranslateLoader,
         useFactory: translateFactory,
-        deps: [TransferState]
-      }
+        deps: [TransferState],
+      },
     }),
   ],
-  providers: [TranslatesService]
+  providers: [TranslatesService],
 })
-export class TranslatesServerModule {
-}
+export class TranslatesServerModule {}

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

@@ -1,7 +1,11 @@
 import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser, isPlatformServer } from '@angular/common';
 import { REQUEST } from '@nguniversal/express-engine/tokens';
-import { TranslateService as NGXTranslateService } from '@ngx-translate/core';
+import {
+  TranslateService as NGXTranslateService,
+  MissingTranslationHandler,
+  MissingTranslationHandlerParams,
+} from '@ngx-translate/core';
 import { MetaService } from '@ngx-meta/core';
 import { Observable, of } from 'rxjs';
 
@@ -10,21 +14,22 @@ import { AppStorage } from '@shared/for-storage/universal.inject';
 import { ILang } from './translates.interface';
 
 const LANG_LIST: ILang[] = [
-  { 'code': 'ru', 'name': 'Русский', 'culture': 'ru-RU' },
-  { 'code': 'en', 'name': 'English', 'culture': 'en-US' }
+  { code: 'ru', name: 'Русский', culture: 'ru-RU' },
+  { code: 'en', name: 'English', culture: 'en-US' },
 ];
 const LANG_DEFAULT: ILang = LANG_LIST[0];
 const STORAGE_LANG_NAME: string = 'langCode';
 
 @Injectable()
 export class TranslatesService {
-  constructor(@Inject(PLATFORM_ID) private _platformId: Object,
-              @Inject(DOCUMENT) private _document: any,
-              @Inject(REQUEST) private _request: Request,
-              @Inject(NGXTranslateService) private _translate: NGXTranslateService,
-              @Inject(MetaService) private _meta: MetaService,
-              @Inject(AppStorage) private _appStorage: Storage
-  ) { }
+  constructor(
+    @Inject(PLATFORM_ID) private _platformId: Object,
+    @Inject(DOCUMENT) private _document: any,
+    @Inject(REQUEST) private _request: Request,
+    @Inject(NGXTranslateService) private _translate: NGXTranslateService,
+    @Inject(MetaService) private _meta: MetaService,
+    @Inject(AppStorage) private _appStorage: Storage,
+  ) {}
 
   public initLanguage(): Promise<any> {
     return new Promise((resolve: Function) => {
@@ -46,8 +51,13 @@ export class TranslatesService {
     }
     if (isPlatformServer(this._platformId)) {
       try {
-        const reqLangList: string[] = this._request.headers['accept-language'].split(';')[0].split(',');
-        language = LANG_LIST.find((lang: ILang) => reqLangList.indexOf(lang.code) !== -1 || reqLangList.indexOf(lang.culture) !== -1);
+        const reqLangList: string[] = this._request.headers['accept-language']
+          .split(';')[0]
+          .split(',');
+        language = LANG_LIST.find(
+          (lang: ILang) =>
+            reqLangList.indexOf(lang.code) !== -1 || reqLangList.indexOf(lang.culture) !== -1,
+        );
       } catch (err) {
         language = LANG_DEFAULT;
       }
@@ -85,3 +95,12 @@ export class TranslatesService {
     return this._translate.currentLang;
   }
 }
+
+export class CommonMissingTranslationHandler implements MissingTranslationHandler {
+  handle(params: MissingTranslationHandlerParams) {
+    if (params.key.match(/\w+\.\w+/) && !params.translateService.translations['ru'][params.key]) {
+      console.warn(`Нехватает перевода для "${params.key}"`);
+    }
+    return params.key;
+  }
+}