Aplicaciones Multi idioma con Angular 2

Aplicaciones Multi idioma con Angular 2
En este tutorial vamos a ver lo sencillo que es crear aplicaciones Multi idioma con Angular 2.

Ya sabemos que uno de los requisitos hoy en día a la hora de desarrollar aplicaciones web o móvil es que soporten multi idioma.

En Angular 2 desarrollar una aplicación que soporte multi idioma es muy sencillo gracias a la librería ng2-translate, no se puede pedir más, sencilla y fácil de configurar.

En los ejemplos de ng2-translate nos enseñan cómo podemos configurar ng-translate utilizando SystemJS, Webpack o Ionic 2, así que no tenemos excusa, en este tutorial nosotros vamos a realizar el ejemplo utilizando SystemJS.

Aplicaciones Multi idioma con Angular 2

Aplicaciones Multi idioma con Angular 2

Para poder empezar nuestro ejemplo lo primero que necesitamos es un proyecto el cual esté configurado con systemjs, si no tienes ninguno entonces simplemente clona en tu máquina el QuickStart de Angular 2 con el siguiente comando.

Con eso tendremos un proyecto para poder empezar con todo lo que necesitamos.

Instalar y Configurar ng2-translate en Angular 2

Para instalar el package ng2-translate en nuestro proyecto simplemente ejecuta el siguiente comando.

Ahora debemos abrir el archivo systemjs.config.js y añadir las siguientes líneas.

Fíjate que sólo he añadido el código que nos interesa, obviamente existe mucho más código en ese archivo. Con eso ya tenemos preparadas todas las dependencias para utilizar ng2-translate en Angular 2.

Si no conoces Angular 2 aquí tienes un curso completo con la versión estable del framework donde aprendemos a trabajar desde 0.

Antes de continuar tenemos que crear un directorio llamado i18n en la raíz del proyecto y dentro cada uno de los idiomas en forma de archivo, es decir, es.json, en.json y fr.json.

De esta forma, cuando establezcamos el idioma de la aplicación a es o en, ng2-translate se irá a buscar un archivo llamado es.json o en.json al directorio i18n y cogerá su contenido, así de sencillo.

Ahora vamos a crear un par de componentes para poder tener algo de navegación y ver cómo todo funciona, primero crearemos un componente llamado home con el siguiente código.

Con este sencillo código hacemos varias cosas, le decimos al servicio Translate los idiomas disponibles en nuestra aplicación, establecemos el idioma por defecto, obtenemos el idioma del navegador y finalmente le decimos el idioma que vamos a utilizar.

El archivo html que representa este componente es el siguiente, simplemente tenemos una lista con los idiomas para poder seleccionar cada uno de ellos.

El código habla por si mismo, utilizamos el servicio translate y le pasamos los valores que tenemos en el archivo de su idioma, en este caso utilizamos la propiedad TITLE del objeto HOME.

Ahora vamos a crear también el componente profile para tener un poco de navegación.

En este punto tenemos configurados ng2-translate y un par de componentes, nos falta unir todo esto, pero antes, vamos a definir las rutas de la aplicación para establecer la navegación, eso lo haremos con el router de Angular 2.

Cómo ya sabemos la pieza principal de Angular 2 es el módulo principal, ahí es donde todo se mezcla y la aplicación empieza a funcionar, así que vamos a abrir el archivo app.module y lo modificamos por lo siguiente.


Para que ng2-translate funcione debemos importar el módulo TranslateModule y añadirlo al array imports cómo vemos en el ejemplo anterior.

Cómo ya hemos dicho, ng2-translate va a buscar los archivos al directorio i18n, pero este comportamiento se puede cambiar de forma muy sencilla con el siguiente código.

Eso es todo, sólo nos queda configurar el archivo app.component para que utilice el router y el archivo index.html para utilizar el tag html base, así de sencillo es crear aplicaciones Multi idioma con Angular 2.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR