add ngx translate

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-electron",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Angular 5 with Electron (Typescript + SASS + Hot Reload)",
   "homepage": "https://github.com/maximegris/angular-electron",
   "author": {
@@ -45,6 +45,8 @@
     "@angular/platform-browser": "5.0.3",
     "@angular/platform-browser-dynamic": "5.0.3",
     "@angular/router": "5.0.3",
+    "@ngx-translate/core": "9.0.1",
+    "@ngx-translate/http-loader": "2.0.0",
     "core-js": "2.4.1",
     "enhanced-resolve": "3.3.0",
     "rxjs": "5.5.2",
@@ -61,8 +63,8 @@
     "autoprefixer": "7.1.4",
     "circular-dependency-plugin": "3.0.0",
     "codelyzer": "3.2.0",
-    "copyfiles": "1.2.0",
     "copy-webpack-plugin": "4.1.1",
+    "copyfiles": "1.2.0",
     "cross-env": "5.0.5",
     "css-loader": "0.28.7",
     "cssnano": "3.10.0",
@@ -87,7 +89,8 @@
     "less-loader": "4.0.5",
     "minimist": "1.2.0",
     "mkdirp": "0.5.1",
-    "npm-run-all": "^4.1.1",
+    "npm-run-all": "4.1.1",
+    "npx": "9.7.1",
     "postcss-loader": "2.0.6",
     "postcss-url": "7.1.2",
     "protractor": "5.1.2",

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';
+// AoT requires an exported function for factories
-
+export function HttpLoaderFactory(http: HttpClient) {
-import { ElectronService } from './providers/electron.service';
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
 
 @NgModule({
   declarations: [
@@ -21,8 +31,15 @@ import { ElectronService } from './providers/electron.service';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
-    AppRoutingModule
+    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 !"
+      }
+  }
+}