Ionic actualmente no ofrece ningún tipo de soporte para hacer una app multi idioma de forma nativa. No obstante, hay una solución sencilla y elegante para hacer una app multi idioma en Ionic. Se trata de ngx-translate, una biblioteca para Angular que permite mostrar contenido en diferentes idiomas.

1. Crear proyecto de prueba

Para probar ngx-translate vamos a crear un proyecto nuevo para explicar como hacer una app multi idioma desde cero.

ionic start demoMultiIdoma blank 
cd demoMultiIdoma

2. Instalar ngx-translate

Instalamos la librería ngx-translate que será la encargada de proporcionarnos una estructura multi idioma muy sencilla y limpia de usar.

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

3. Ubicación de las traducciones

Creamos la carpeta src/assets/i18n , en ella se ubicará un fichero json por cada idioma. Cada fichero contiene todas las variables de texto a usar en la aplicación con su traducción correspondiente para cada idioma.

Si queremos tener idioma español e inglés, crearemos un fichero para cada idioma con el siguiente formato:

  • es.json
{
 "HOLA": "Hola",
 "BIENVENIDO": "Bienvenido",
 "SALUDO": "Hola, {{ value }}"
}
  • en.json
{
 "HOLA": "Hello",
 "BIENVENIDO": "Welcome",
 "SALUDO": "Hi, {{ value }}"
}

4. Configuración ngx-translate

Lo primero de todo es importar las dependencias necesarias para usar ngx-translate en el archivo app.module.ts

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from "@angular/common/http";

Declaramos dentro de imports el código marcado de color azul:

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

También debemos crear una función que obtenga los ficheros json de las traducciones desde el directorio src/assets/i18n

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

6. Definir un idioma por defecto

El idioma de por defecto lo establecemos en el fichero app.component.ts, será el idioma con el que la aplicación inicia.  Lo primero es importar el provider TranslateService e inyectarlo en el constructor.

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

//...
export class MyApp {

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
    private translateService: TranslateService) {

    // Idioma
    this.translateService.setDefaultLang('es');
    this.translateService.use('es'); 
      
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Con this.translateService.setDefaultLang(‘es’): le indicamos que el idioma por defecto es el español y con this.translateService.use(‘es’); que sea el idioma seleccionado.

7. Mostrar texto multi idioma

Solo queda mostrar el texto con el idioma adecuado. Hacer esto es muy sencillo ya que haremos uso del pipe translate. Basta con poner las variables en el HTML con las como en el siguiente ejemplo:

{{ 'HOLA' | translate }}
{{ 'SALUDO' | translate:{value: 'Alejandro'} }}

Con el segundo ejemplo además, vemos cómo podemos insertar valores personalizados para ser reemplazadas en el texto por las variables definidas en el.

Para cambiar el idioma usaremos la siguiente función:

  this.translateService.use(idioma);

Donde la variable idioma es un string con la etiqueta del idioma a establecer (“en”, “es”, etc)

Pues con esto ya hemos logrado tener una aplicación multi idioma en Ionic. Por el momento esta es la forma más sencilla de hacerlo ya que Ionic no proporciona ningún componente nativo para realizar esto. No obstante, esta solución es muy válida por su sencillez de implementación y usabilidad.

8. Posible Bug

Si al terminar todos estos pasos estáis teniendo un error: “TypeError: Object(…) is not a function“. Atención a esto, por que me ha dado un poco de dolor de cabeza hasta que he visto que el fallo era ocasionado por un bug de la propia librería ngx-translate.

Si estás usando Angular v5, usa ngx-translate 9.x porque la versión 10 y superior solo son compatibles con Angular v6. Si intentas utilizar v10 con Angular v5, obtendrás un mensaje de error “TypeError: Object(…) is not a function

The end

Espero que os haya sido de utilidad esta información para conseguir hacer vuestra app multi idioma en ionic. Cualquier duda dejar un comentario. ^^

Comparte el post