Add i18n on Angular 4

Frontend Angular 4/package.json

@@ -21,6 +21,8 @@
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
     "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
+    "@ngx-translate/core": "^7.2.2",
+    "@ngx-translate/http-loader": "^0.1.0",
     "core-js": "^2.4.1",
     "d3": "^4.12.2",
     "font-awesome": "^4.7.0",

Frontend Angular 4/src/app/app.component.html

-<router-outlet></router-outlet>
+<div>
+    <router-outlet></router-outlet>
+    <span class="translate">{{ "HELLO" | translate }}</span>    
+</div>

Frontend Angular 4/src/app/app.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { TranslateService } from '../../node_modules/@ngx-translate/core';
 
 @Component({
     selector: 'app-root',
@@ -7,7 +8,11 @@ import { Router } from '@angular/router';
     styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-    constructor(public router: Router) { }
+    constructor(public router: Router, public translate: TranslateService) {
+        this.translate.addLangs(['es', 'en']);
+        this.translate.setDefaultLang('es');
+        //this.translate.use('en');
+    }
     ngOnInit() {
         //this.router.navigate(['/login']);
     }

Frontend Angular 4/src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpModule, Http } from '@angular/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { AuthGuard } from './shared/guards/auth.guard';
 import { SessionService } from './shared/services/session.service';
 import { NotificacionService } from './shared/services/notificacion.service';
-import {NotificacionModule} from './notificacion/notificacion.module';
+import { NotificacionModule } from './notificacion/notificacion.module';
+
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+
+export function HttpLoaderFactory(http: Http) {
+    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
 
 @NgModule({
     declarations: [
@@ -18,9 +25,16 @@ import {NotificacionModule} from './notificacion/notificacion.module';
         BrowserModule,
         FormsModule,
         HttpModule,
-        AppRoutingModule
+        AppRoutingModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [Http]
+            }
+        })
     ],
-    providers: [AuthGuard, SessionService,NotificacionService],
+    providers: [AuthGuard, SessionService, NotificacionService],
     bootstrap: [AppComponent]
 })
 export class AppModule { }

Frontend Angular 4/src/assets/i18n/en.json

+{
+    "HELLO": "Hello"
+}
\ No newline at end of file

Frontend Angular 4/src/assets/i18n/es.json

+{
+    "HELLO" : "Hola"
+}
\ No newline at end of file