add ngx translate

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ElectronService } from './providers/electron.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-root',
@@ -7,7 +8,10 @@ import { ElectronService } from './providers/electron.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  constructor(public electronService: ElectronService) {
+  constructor(public electronService: ElectronService,
+    private translate: TranslateService) {
+
+    translate.setDefaultLang('en');
 
     if (electronService.isElectron()) {
       console.log('Mode electron');

src/app/app.module.ts

@@ -4,14 +4,24 @@ import 'polyfills';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+
+import { AppRoutingModule } from './app-routing.module';
+
+// NG Translate
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+import { ElectronService } from './providers/electron.service';
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './components/home/home.component';
 
-import { AppRoutingModule } from './app-routing.module';
-
-import { ElectronService } from './providers/electron.service';
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
 
 @NgModule({
   declarations: [
@@ -21,8 +31,15 @@ import { ElectronService } from './providers/electron.service';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
-    AppRoutingModule
+    HttpClientModule,
+    AppRoutingModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (HttpLoaderFactory),
+        deps: [HttpClient]
+      }
+    })
   ],
   providers: [ElectronService],
   bootstrap: [AppComponent]

src/app/components/home/home.component.html

@@ -1,5 +1,5 @@
 <div class="container">
   <h1 class="title">
-    {{title}}
+    {{ 'PAGES.HOME.TITLE' | translate }}
   </h1>
 </div>

src/app/components/home/home.component.ts

@@ -6,7 +6,6 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
-  title = `App works !`;
 
   constructor() { }
 

src/assets/i18n/en.json

@@ -0,0 +1,7 @@
+{
+  "PAGES": {
+      "HOME": {
+          "TITLE": "App works !"
+      }
+  }
+}