Internationalization (i18n) angular

En este tutorial de Angular 9/8 veremos cómo traducir una aplicación Angular usando la librería ngx-translate.

Ngx-translate es una biblioteca de internacionalización para Angular que permite internacionalizar la aplicación en varios idiomas.

Puede convertir fácilmente datos estáticos o dinámicos en varios idiomas.  Proporciona un servicio útil, una directiva y una tubería para manipular cualquier dato.

¿Qué es la internacionalización?

La internacionalización es el proceso de diseño y preparación de su aplicación para poder utilizarla en diferentes idiomas. La localización es el proceso de traducir su aplicación internacionalizada a idiomas específicos para entornos locales particulares.

angular.io

Agregar ngx-translate en la aplicación Angular 9/8

Lo primero que debemos hacer es instalar los paquetes ngx-translate, para ello ejecutamos los siguientes comandos:

npm i @ngx-translate/core --save

npm i @ngx-translate/http-loader --save

El paquete @ ngx-translate / core incluye los servicios esenciales, canalización y directivas para convertir el contenido en varios idiomas.

El servicio @ ngx-translate / http-loader ayuda a recuperar los archivos de traducción de un servidor web.

A continuación debemos importar ambos paquetes en el archivo app.module.ts

Lo primero que debemos hacer es importar TranslateModule dentro de los imports de @NgModule

Nota: HttpClientModule hay que importarlo para que HttpClient pueda funcionar.

imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpTranslateLoader,
        deps: [HttpClient]
      }
    })
  ]

A continuación declaramos la siguiente función, fuera de @NgModule y de la clase

export function httpTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

Este sería el resultado completo de nuestro app.module.ts

import { AppComponent } from './app.component';

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { HttpClient, HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

export function httpTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

Configurar los archivos de traducción

Debmos abrir la carpeta de assets y crear la carpeta «i18n». Dentro de esta carpeta crearemos nuestros ficheros json con las traducciones.

Se pueden añadir tantos idiomas como se desee, para ello basta con crear un archivo json por cada idioma

Es importante destacar, que las keys deben llamarse igual en todos los json.

En este tutorial vamos a añadir los idiomas de español e ingles y para ello creamos:

• en.json
• es.json

en.json:

{
    "Home": {
        "Menu": {
            "Inicio": "Index",
            "Contacto": "Contact"
        },
        "TituloPrincipal": "Main Page from my web",
        "RealizadoPor": "Made by: ",
        "Deportes": [
            {
                "Nombre": "Football"
            },
            {
                "Nombre": "Basketball"
            }
        ]
    }
}

es.json:

{
    "Home": {
        "Menu": {
            "Inicio": "Inicio",
            "Contacto": "Contacto"
        },
        "TituloPrincipal": "Esto es la página principal de mi página web",
        "RealizadoPor": "Realizado por: ",
        "Deportes": [
            {
                "Nombre": "Futbol"
            },
            {
                "Nombre": "Baloncesto"
            }
        ]
    }
}

Implementación de las traducciones con TranslateService

Lo primero que debemos hacer es implementar las traducciones en app.component.ts que es el primer componente que se carga de la aplicación.

import { TranslateService } from '@ngx-translate/core';

Lo inyectamos en el constructor, seleccionamos los idiomas disponibles y el idioma predeterminado con el que arrancará la aplicación.

Añadir idiomas

this.idiomas = ['es', 'en'];
translate.addLangs(this.idiomas);

Añadir idioma por defecto

translate.setDefaultLang('es');

Resultado completo

export class AppComponent {
 

  private idiomas: Array<string>;

  constructor(public translate: TranslateService) {
    this.idiomas = ['es', 'en'];
    translate.addLangs(this.idiomas);
    translate.setDefaultLang('es');
  }
}

Nota: los idiomas que le añadimos a TranslateService, deben llamarse igual que los json creados previamente.

En nuestro caso creamos los json llamados «en.json» y «es.json», por lo que los nombres que debemos pasarle al servicio son: «en» y «es». Si quisiéramos poner otros nombres deberían coincidir el nombre del archivo con el nombre que le pasamos al servicio. Por ejemplo si a nuestro json le llamamos «esp.json», el idioma que le pasemos al servicio debe ser «esp».

Configurar traducciones

Cambiar idioma

Usaremos el método this.translate.use(idioma) para cambiar el idioma de la página

this.translate.use(‘en’);

Mediante uso de pipes

Gracias a una pipe que viene incorporada en la librería, podemos traducir nuestra aplicación directamente en el html de la siguiente forma:

{{‘Home.Menu.Contacto’ | translate }}

"Home": {
         "Menu": {
             "Inicio": "Inicio",
             "Contacto": "Contacto"
         },
}

Pasamos el primer valor como el mismo valor que definimos en los archivos json. El segundo valor es la pipe encargada de traducir nuestro texto.

Si usamos esta traducción y cambiamos el idioma de la aplicación, automáticamente se traducirán todos los textos.

Mediante typescript

También podemos realizar estas traducciones usando la función asíncrona get que nos ofrece el TranslateService

 constructor(public translate: TranslateService) {
    this.translate.get('Home.Menu.Contacto').subscribe(data => {
         this.mensaje = data;
    });
}

Importante: Si usamos este método, debemos volver a realizar la llamada si se cambia el idioma de la aplicación.

Autor: Iván Sánchez Victoria

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin 

Centro: Tajamar 

Año académico: 2019-2020

Github:

https://github.com/isanchezvictoria/AngularTraduccionesISV