En el creciente mundo digital actual, los desarrolladores web buscan conectarse con una audiencia global. Una estrategia clave para lograr esto es transformar su aplicación Angular en una experiencia multilingüe. Bienvenido a Internacionalización (i18n), donde su aplicación puede comunicarse con los usuarios en sus idiomas nativos, sin importar dónde se encuentren. En este blog, profundizaremos en la integración de i18n en su proyecto Angular, garantizando que su aplicación sea accesible y fácil de usar para personas de todo el mundo.

Introducción a la Internacionalización (i18n) en Angular

Imagine su aplicación web como un puente que conecta a usuarios de todo el mundo. Para crear una experiencia acogedora y fácil de usar para todos, es esencial comunicarse en su idioma. La internacionalización (i18n) es la clave para que su aplicación se adapte a varios idiomas y regiones. Angular ofrece herramientas y funciones sólidas para ayudarte a lograrlo.

Configurando un nuevo proyecto angular

Antes de comenzar nuestro viaje i18n, creemos un nuevo proyecto Angular.

ng new i18n-app

Puede utilizar el siguiente comando para comenzar un nuevo proyecto de Angular utilizando la CLI de Angular. Durante el proceso de configuración, puede configurar su proyecto, incluidas opciones como habilitar el enrutamiento angular y elegir un formato de hoja de estilo (por ejemplo, CSS, SCSS). Asegúrese de seleccionar la configuración que coincida con los requisitos de su proyecto.

Instalación y configuración de las herramientas i18n de Angular

1. Para iniciar nuestro viaje i18n, necesitaremos las herramientas adecuadas. Instalaremos y configuraremos las herramientas i18n de Angular para que nuestra aplicación sea multilingüe.

npm install @ngx-translate/core --save

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

1. Una vez instalado ngx-translate, podemos importarlo a nuestro módulo Angular o Configuración y configurar el servicio de traducción:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';

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

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

Si está utilizando el archivo app.config, simplemente reemplace NgModule con el siguiente código:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';

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

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom([
            BrowserModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            }),
        ])
    ]
}

En este código, importamos los módulos ngx-translate necesarios y configuramos el cargador de traducción usando la función HttpLoaderFactory. La función HttpLoaderFactory utiliza el módulo HttpClient para cargar archivos de traducción de forma asincrónica desde el servidor.

Creación de archivos de traducción

Una vez configurado el servicio de traducción, podemos crear archivos de traducción para cada idioma que queramos admitir. Los archivos de traducción son archivos JSON que asignan claves a cadenas traducidas.

Cree archivos con el código de idioma necesario como nombre y agrégueles traducciones.

Por ejemplo, aquí hay un archivo de traducción al inglés:

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

Y aquí hay un archivo de traducción al alemán:

{
  "title": "Meine App",
  "greeting": "Hallo, {{name}}!"
}

Aquí está la estructura de carpetas y los nombres de los archivos.

Nota: Los archivos de traducción utilizan las mismas claves pero con valores diferentes para cada idioma. Esto simplifica el cambio entre idiomas en nuestra aplicación sin modificar el código.

Uso de traducciones en plantillas

Con nuestros archivos de traducción listos, ahora podemos integrarlos en nuestras plantillas de Angular. El primer paso es inyectar el servicio de traducción en nuestro componente:

App.component.ts :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private translate: TranslateService) {
    // Set the default language
    translate.setDefaultLang('EN');
  }

  translateLanguage(lang: string) {
    // Set the current language
    this.translate.use(lang);
  }
}

En este código, inyectamos TranslateService en nuestro componente y configuramos el inglés como idioma predeterminado. También definimos un método TranslateLanguage que nos permite cambiar el idioma de la aplicación.

Crear un componente para traducción de idiomas

ng g c LanguageTranslation

Después de crear el componente, podemos utilizar el servicio de traducción para traducir entre varios idiomas.

LanguageTranslation.component.ts

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

@Component({
  selector: 'app-language-translator'
})

export class LanguageTranslationComponent {
constructor(private translate: TranslateService) {}

TranslateToEnglish() {
  this.translate.use('En');
}

TranslateToGerman() {
  this.translate.use('DE');
 }
}

Traducción de idioma.component.html

{{ "title" | translate }}


    English
    German

En este código, creamos un LanguageTranslationComponent que inyecta el TranslateService y proporciona dos botones para cambiar entre inglés y alemán. Cuando se hace clic en un botón, llamamos al método TranslateLanguage en TranslateService con el código de idioma apropiado.

Nota: Al usar this.translate.use('DE'), asegúrese de utilizar el código de idioma correcto, ya que distingue entre mayúsculas y minúsculas y asegúrese de que el nombre del archivo sea exacto.

Conclusión:

La internacionalización es un elemento clave del desarrollo de software moderno y Angular ofrece herramientas sólidas para crear aplicaciones multilingües. Con la biblioteca ngx-translate, implementar i18n en Angular se vuelve más simple y adaptable.

En este artículo, cubrimos cómo usar ngx-translate para generar archivos de traducción, aplicar traducciones en plantillas y cambiar de idioma dentro de una aplicación Angular. Si sigue estas pautas, podrá crear fácilmente una aplicación multilingüe accesible para usuarios de todo el mundo.

¡Gracias!

No dudes en dejar comentarios si tienes alguna pregunta