Aplicaciones multiidioma en IONIC – Aprende como funcionan

11/09/20230 comentarios

Hola a todos, hoy os voy a explicar como podemos hacer una app multiidioma en IONIC.

En una aplicación móvil, es habitual que necesitemos que se muestre en varios idiomas, ya sea eligiendo el idioma o de forma dinámica.

Creación proyecto IONIC multiidioma

En primer lugar, es crear un proyecto IONIC, sino sabes como se hace, te dejo un tutorial aquí:

IONIC 7 – Guía sobre como crear tu primera aplicación

Instalando las dependencias necesarias

Para empezar, abre tu terminal dentro de tu proyecto e instala las siguientes dependencias:

Ngx-translate

$ npm i @ngx-translate/core

$ npm i @ngx-translate/http-loader

Plugin Device de Capacitor, nos permitira obtener el idioma del dispositivo.

$ npm install @capacitor/device

Ficheros de traducción

Para hacer la magia de la traducción, lo que vamos a necesitar son ficheros JSON con las traducciones ya montadas, uno por cada idioma, por ejemplo, es.json o en.json.

Si quieres saber más sobre la internacionalización, visita este articulo de la Wikipedia.

En este tutorial, vamos a tener español (es) e ingles (en).

Estos ficheros los vamos a tener en la carpeta i18n dentro de assets:

Este es el contenido:

— en.json

{
"hello.world": "Hello world!"
}

— es.json

{
"hello.world": "Hola mundo!"
}

Configurando nuestro modulo de traducción

Asimismo, en nuestro app.module, debemos configurar el modulo de @ngx-translate.

Por lo que vamos a necesitar importar el modulo de TranslateModule de @ngx-translate y hacer una función para obtener los ficheros de traducción antes indicados.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// Función para obtener los ficheros de la carpeta i18n
export function HttpLoaderFactory(http: HttpClient){
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json')
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    HttpClientModule,
    // Modulo de @ngx-translate
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule { }

Obtener el idioma a usar en nuestra app multiidioma

Es recomendable indicar que tenemos un idioma por defecto para los casos donde no tengamos la traducción, usando TranslateService.

También, debemos esperar a que el dispositivo este listo y obtener el idioma del dispositivo con el plugin de Capacitor Device.

Además, con el método use de TranslateService podemos obtener las traducciones de un idioma.

import { Component } from '@angular/core';
import { Device } from '@capacitor/device';
import { Platform } from '@ionic/angular';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private translateService: TranslateService
  ) {
    this.translateService.setDefaultLang('es');
    this.initApp();
  }

  initApp() {

    // Esperamos a que el dispositivo este listo
    this.platform.ready().then(async () => {

      // Obtengo el idioma del dispositivo
      const language = await Device.getLanguageCode();

      // Cambio el idioma
      if (language.value) {
        this.translateService.use(language.value);
      }

    })

  }

}

Traducir en una pagina de IONIC en nuestra app multiidioma

A continuación, en el módulo que queramos traducir, debemos importar también el modulo TranslateModule pero llamando al método forChild.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { TranslateModule } from '@ngx-translate/core';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    HttpClientModule,
    TranslateModule.forChild()
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

En la parte HTML, usaremos el pipe translate, pasándole la clave del fichero de traducción.


  
    
      <!-- Traduccion -->
      {{'hello.world' | translate}}
    
  



  <!-- Botones para cambiar de idioma -->
  Spanish
  English

Por consiguiente, este es el resultado:

Traducir de forma dinámica en nuestra app multiidioma

Adicionalmente, podemos crear unos botones para cambiar el idioma de forma dinamica, sin necesidad de recargar la app.

Por lo tanto, tenemos que hacer algunos cambios:

Añadimos dentro de forChild lo mismo que en el app.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpLoaderFactory } from '../app.module';
import { HttpClient, HttpClientModule } from '@angular/common/http';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    HttpClientModule,
    // Necesario para el cambio dinamico de idioma
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

En l parte HTML, pondremos un par de botones:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      <!-- Traduccion -->
      {{'hello.world' | translate}}
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- Botones para cambiar de idioma -->
  <ion-button (click)="changeSpanish()">Spanish</ion-button>
  <ion-button (click)="changeEnglish()">English</ion-button>
</ion-content>

En la parte TS, crearemos los métodos que necesitamos, en cada uno de ellos, usaremos el método use de TranslateService.

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private translate: TranslateService
  ) { }

  changeSpanish() {
    this.translate.use('es');
  }

  changeEnglish() {
    this.translate.use('en');
  }

}

Este es el resultado final: