Merge pull request #270 from tysonpaul89/issue-269

Issue 269
start-angular · Mar 12, 2019 · 53dc85c · 53dc85c
2 parents 04a62e6 + 840c6d1
commit 53dc85c
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 52 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,39 +1,21 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { LanguageTranslationModule } from './shared/modules/language-translation/language-translation.module'
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { AuthGuard } from './shared';
 
-// AoT requires an exported function for factories
-export const createTranslateLoader = (http: HttpClient) => {
-    /* for development
-    return new TranslateHttpLoader(
-        http,
-        '/start-angular/SB-Admin-BS4-Angular-6/master/dist/assets/i18n/',
-        '.json'
-    ); */
-    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
-};
-
 @NgModule({
     imports: [
         CommonModule,
         BrowserModule,
         BrowserAnimationsModule,
         HttpClientModule,
-        TranslateModule.forRoot({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: createTranslateLoader,
-                deps: [HttpClient]
-            }
-        }),
+        LanguageTranslationModule,
         AppRoutingModule
     ],
     declarations: [AppComponent],

diff --git a/src/app/layout/components/header/header.component.ts b/src/app/layout/components/header/header.component.ts
@@ -12,11 +12,6 @@ export class HeaderComponent implements OnInit {
 
     constructor(private translate: TranslateService, public router: Router) {
 
-        this.translate.addLangs(['en', 'fr', 'ur', 'es', 'it', 'fa', 'de', 'zh-CHS']);
-        this.translate.setDefaultLang('en');
-        const browserLang = this.translate.getBrowserLang();
-        this.translate.use(browserLang.match(/en|fr|ur|es|it|fa|de|zh-CHS/) ? browserLang : 'en');
-
         this.router.events.subscribe(val => {
             if (
                 val instanceof NavigationEnd &&

diff --git a/src/app/layout/components/sidebar/sidebar.component.ts b/src/app/layout/components/sidebar/sidebar.component.ts
@@ -16,11 +16,6 @@ export class SidebarComponent implements OnInit {
     @Output() collapsedEvent = new EventEmitter<boolean>();
 
     constructor(private translate: TranslateService, public router: Router) {
-        this.translate.addLangs(['en', 'fr', 'ur', 'es', 'it', 'fa', 'de']);
-        this.translate.setDefaultLang('en');
-        const browserLang = this.translate.getBrowserLang();
-        this.translate.use(browserLang.match(/en|fr|ur|es|it|fa|de/) ? browserLang : 'en');
-
         this.router.events.subscribe(val => {
             if (
                 val instanceof NavigationEnd &&

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
 import { routerTransition } from '../router.animations';
 
 @Component({
@@ -11,14 +10,8 @@ import { routerTransition } from '../router.animations';
 })
 export class LoginComponent implements OnInit {
     constructor(
-        private translate: TranslateService,
-        public router: Router
-        ) {
-            this.translate.addLangs(['en', 'fr', 'ur', 'es', 'it', 'fa', 'de', 'zh-CHS']);
-            this.translate.setDefaultLang('en');
-            const browserLang = this.translate.getBrowserLang();
-            this.translate.use(browserLang.match(/en|fr|ur|es|it|fa|de|zh-CHS/) ? browserLang : 'en');
-    }
+      public router: Router
+    ) {}
 
     ngOnInit() {}
 

diff --git a/src/app/shared/modules/language-translation/language-translation.module.ts b/src/app/shared/modules/language-translation/language-translation.module.ts
@@ -0,0 +1,47 @@
+/**
+ * This module is used to language translations.
+ * The translations are saved in a json file in /src/app/assets/i18n directory
+ * Docs: https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular7-app-with-ngx-translate
+ */
+import { NgModule } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+// import ngx-translate and the http loader
+import {
+  TranslateLoader,
+  TranslateModule,
+  TranslateService
+} from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+// ngx-translate - required for AOT compilation
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
+
+@NgModule({
+  declarations: [],
+  imports: [
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    })
+  ],
+  exports: [
+    TranslateModule
+  ],
+})
+export class LanguageTranslationModule {
+  constructor(
+    private translate: TranslateService,
+  ) {
+    // Gets Default language from browser if available, otherwise set English ad default
+    this.translate.addLangs(['en', 'fr', 'ur', 'es', 'it', 'fa', 'de', 'zh-CHS']);
+    this.translate.setDefaultLang('en');
+    const browserLang = this.translate.getBrowserLang();
+    this.translate.use(browserLang.match(/en|fr|ur|es|it|fa|de|zh-CHS/) ? browserLang : 'en');
+  }
+}
diff --git a/src/app/signup/signup.component.ts b/src/app/signup/signup.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { routerTransition } from '../router.animations';
-import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'app-signup',
@@ -9,12 +8,7 @@ import { TranslateService } from '@ngx-translate/core';
     animations: [routerTransition()]
 })
 export class SignupComponent implements OnInit {
-    constructor(private translate: TranslateService) {
-        this.translate.addLangs(['en', 'fr', 'ur', 'es', 'it', 'fa', 'de', 'zh-CHS']);
-        this.translate.setDefaultLang('en');
-        const browserLang = this.translate.getBrowserLang();
-        this.translate.use(browserLang.match(/en|fr|ur|es|it|fa|de|zh-CHS/) ? browserLang : 'en');
-    }
+    constructor() {}
 
     ngOnInit() {}
 }
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
@@ -31,10 +31,10 @@
     "View All" : "Voir tout",
     "More Themes" : "More Themes",
     "Collapse Sidebar" : "Collapse Sidebar",
-    "Full Name": "Full Name",
+    "Full Name": "Nom complet",
     "Email": "Email",
-    "Password": "Password",
-    "Repeat Password": "Repeat Password",
-    "Register": "Register",
-    "Log in": "Log in"
+    "Password": "mot de passe",
+    "Repeat Password": "Répéter le mot de passe",
+    "Register": "registre",
+    "Log in": "S'identifier"
 }