Implementar sistema sencillo de traducción en Angular 2

Implementar sistema sencillo de traducción en Angular 2

Aviso: Este tutorial era para Angular 2, en las nuevas versiones, es muy idéntico, solo cambia que hay que instalar una nueva dependencia y la instalación actual, cambió su nombre. Asimismo, a la hora de cargar esta dependencia en el módulo también cambió pero los cambios se pueden encontrar en la página de la dependencia o en el README de Github (https://github.com/ngx-translate/core)

A la hora de desarrollar aplicaciones nos vemos con la necesidad de que estas sean multi-lenguaje ya que no únicamente darán uso gente de un país donde hablen nuestro idioma y es ahí donde ocupamos que nuestra aplicación tenga soporte multi-lenguaje.

Para este tipo de soporte existen muchas librerías pero les voy a enseñar a usar una muy sencilla y que a mi me funcionó bastante bien y sin necesidad de batallar.

Para iniciar con esto deberemos tener ya nuestra aplicación creada y funcional, una vez que tengamos este paso es necesario empezar con la instalación de la librería, para ello usamos npm y la instalamos con el comando:

npm install ng2-translate --save

Recordemos que la flag --save se utiliza para que se mantenga en nuestro código dentro del package.json ahorrándonos un paso.

Una vez que ya tenemos la librería instalada y lista para usar en nuestras dependencias, es hora de implementarla dentro del módulo principal (el AppModule ):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; 
import { Http, HttpModule } from '@angular/http';
import { TranslateModule,TranslateLoader, TranslateStaticLoader  } from 'ng2-translate';
@NgModule({ 
      imports: [ 
         BrowserModule, 
         HttpModule, 
         TranslateModule.forRoot({
              provide: TranslateLoader,
              useFactory: function(http: Http){ return new TranslateStaticLoader(http, '/assets/i18n', '.json') },
              deps: [Http]
          }), 
       ], 
       bootstrap: [AppComponent] 
}) 
export class AppModule { }

Una vez que ya está listo el módulo principal y cargada la librería necesitamos implementarla en nuestro componente y crear las traducciones. Vamos a empezar creando las traducciones, para esto sencillamente en la carpeta assets es necesario crear una carpeta llamada i18n en la cual vamos a incluir cada lenguaje en el formato *.json es decir, si tenemos el idioma español, crearíamos un archivo llamado es.json para inglés sería en.json y así sucesivamente para cada idioma que querramos.

Una vez creados los archivos es necesario incluir las traducciones, por ejemplo, para traducir la página principal (home) se incluiría el código con el formato:

{
  "Home": {
    "welcome-msg": "Welcome to my page!"
  }
}

Guardamos esto en el archivo en.json y el mismo código pero traduciendo “Welcome to my page!” a español (“¡Bienvenido a mi página!”) en es.json y listo, quedaron nuestras traducciones.

Ahora es únicamente necesario implementarlo en nuestro componente (y su template respectivo) para esto es muy sencillo, en nuestro componente hay que agregar las siguientes líneas (esto es en el componente base de Angular, app.component.ts):

import {Component, OnInit} from '@angular/core';
//Cargamos el import del servicio de traducción de la librería
import {TranslateService} from 'ng2-translate';
//Por default dejamos el inglés
const defaultLanguage = "en";
//Y como adicional el español
const additionalLanguages = ["es"];
//Combinamos las traducciones disponibles al default.
const languages: string[] = [defaultLanguage].concat(additionalLanguages);
@Component({
     selector: "app-root",
     templateUrl: "app.component.html",
})
export class AppComponent implements OnInit {
     //Cargamos el constructor con el servicio de traducción que genera nuestra variable "objeto"
     constructor(private translate: TranslateService) { }
     ngOnInit() {
          //Asignamos el lenguaje predefinido y los disponibles
          this.translate.setDefaultLang(defaultLanguage);
          this.translate.addLangs(additionalLanguages);
          //Nos basamos en el lenguaje del navegador para cambiar el lenguaje
          let initLang = this.translate.getBrowserLang();
          if (languages.indexOf(initLang) === -1) {
              initLang = defaultLanguage;
          }
          //En base a lo anterior asignamos el lenguaje a usar
          this.translate.use(initLang);
     }
}

Con esto ya está el componente base creado y como podemos leer en el código, llamaremos como template el archivo app.component.html que es el template predefinido cuando creamos una aplicación con Angular 2 (usando AngularCLI). En este archivo podremos implementar las traducciones de la siguiente forma: {{ "NombrePagina.Variable" | translate }}

Esto se refiere a NombrePagina como la llave inicial de cada traducción, es decir, en este ejemplo sería Home como se puede observar en el archivo JSON que previamente creamos. Y Variable a la llave que incluye el mensaje que sería traducido, en este caso welcome-msg

Una vez que entendimos el formato para implementar traducciones, pondremos entonces el mensaje en nuestro app.component.html de la siguiente forma:

<h1>{{ "Home.welcome-msg" | translate }}</h1>

Y si visitamos nuestro sitio se mostrará el mensaje “¡Bienvenido a mi página” en caso de tener el navegador en español y si lo tenemos en inglés se mostrará “Welcome to my page!”. Cabe mencionar que, en caso de que no logre detectar el idioma del navegador, entonces se usará por default inglés y se mostrará “Welcome to my page!”.

Y eso es todo, con esto podemos implementar cuantos lenguajes querramos de forma sencilla en nuestra aplicación con Angular 2.