Angular - Internacionalización con Angular. P1

   Una de las características que debe tener cualquier aplicación web que quiere llegar de una forma masiva a todo el mundo, es el poder mostrar la web en diferentes idiomas.

    En Angular esto se puede conseguir de manera fácil. La idea es marcar los textos que tengas en la aplicación. Estos marcajes se harán en las vistas de cada componente del proyecto angular, ya que es donde tendremos los textos. Para marcar cada texto se utiliza la herramienta i18n(esta herramienta ya se instala automáticamente como un módulo mas, cuando creas el proyecto angular). Básicamente lo que se hace es acompañar cada texto de la etiqueta i18n!

                      Ejem:    <h1>Hola i18n!</h1>

     Luego con una herramienta de linea de comandos se generará un fichero llamada messages.xlf. Luego se copiará este fichero una vez por cada idioma que queramos tener. En cada fichero copiado que llamaremos ficheros de traducción, se añadirán los textos en el idioma que corresponda. Este se puede hacer manualmente o bien con una herramienta de creación automática de textos en otro idioma. Nosotros en este artículo lo haremos de forma manual. Finalmente, una vez que se tiene el contenido de todos los ficheros de traducción, se ejecutará el compilador de Angular, que importará los ficheros de traducción completos, reemplazando los mensajes originales con los textos traducidos y genera una nueva versión de la aplicación en cada lenguaje destino.   Pero vayamos por partes:

      Lo primero es marcar todos los textos en el idioma original con la etiqueta i18n! . Además, esta etiqueta también puede tener una serie de atributos para cada elemento html que contenga un texto, como vemos en el siguiente ejemplo:

      <h1 i18n=”Titulo | Una descripción para este texto”>Hola i18n!</h1>


   Es decir, puedes tener un título y una descripción para el texto. Esta información aparecerá luego en el fichero messages.xlf

     Se puede aplicar la etiqueta i18n, practicamente sobre cualquier elemento html. Por ejemplo, si quisieramos traducir también el título de una imagen, haríamos algo como esto:

                             <img [src]="logo" i18n-title title="Logo de Angular">

     Es decir, la idea es aplicar la etiqueta i18n seguida de un guión y el nombre del atributo html sobre el que queremos aplicar la traducción.

     Una vez tengamos marcados con la etiqueta i18n, todos los textos que queremos traducir, tenemos que ejecutar el comando siguiente (es recomendable añadir en el fichero package.json, dentre la sección scripts, la linea "i18n" : "ng-xi18n", como abreviatura del comando):

           ng xi18n --output-path src/locale

    Te creará dentro de la carpeta de proyecto "src/local", el fichero messages.xlf, que tendrá un aspecto como el siguiente:

    Este fichero lo vamos a copiar y renombrar a messages.en.xlf, ya que vamos a traducir al idioma inglés. Si quisiéramos también traducir al idioma francés, lo copiariamos con el nombre messages.fr.xlf y así con cada idioma al queramos traducir.
     Entonces en el fichero messages.en.xlf, nos aseguramos que la propiedad source-language tiene el valor "es", ya que el idioma original de nuestra web es el español.  Ahora en cada etiqueta "target", añadimos los correspondientes textos en inglés.  El fichero tendrá el aspecto siguiente:

  Una vez tengamos todos los textos traducidos en todos las etiquetas "target", si por ejemplo, queremos lanzar el servidor de angular mostrando el idioma español, es decir, el idioma original o idioma predeterminado del proyecto, simplemente ejecutamos ng serve, como siempre. Pero si queremos lanzar el proyecto en el idioma inglés ejecutaríamos el comando:

   ng serve --aot --locale en --i18n-format xlf --i18n-file src/locale/messages.en.xlf

    Básicamente le estamos indicando con el parámetro --locale, que queremos ejecutar el proyecto en el idioma inglés. A continuación le decimos cual es el formato del fichero de traducción con --i18n-format xlf, y finalmente le decimos cual es el fichero que contiene la traducción con el parámetro --i18n-file seguido de la ruta al fichero.
   
    Y si queremos compilar el proyecto, lo que debemos hacer es compilar una vez por cada idioma que queramos implementar. En nuestro compilaríamos primero el proyecto de la manera normal, para que nos cree la carpeta "dist", con todo el proyecto compilado, incluido los textos del idioma predeterminado. Para este ejecutamos el comando:     ng build --prod

    A continuación si queremos implementar la traducción al idioma inglés, ejecutaríamos el comando:

ng build --aot --output-path dist/en --base-href en --locale en --i18n-format xlf --i18n-file src/locale/messages.en.xlf 

   Este comando, creará dentro de la carpeta "dist", una subcarpeta "en", donde pondrá el código compilado en el idioma inglés.  El parámetro --base-href es el más importante en este comando, ya que ahí le estamos indicando la referencia base de la url para el idioma inglés.
Para acceder entonces a la versión en inglés, pondrías en el navegador la dirección de tu página seguida de la cadena "en". Ejem:

                                  https://myapp.com/en

   Si en el parámetro --base-href pusieramos english en vez de en, accederiamos con la url:

                                 https://myapp.com/english


   Para probar el proyecto compilado, sería buena idea subirlo a Firebase. Si no sabes como hacer esto, en éste otro artículo te explico como puedes subir un proyecto angular al hosting de Firebase.


  Aquí te dejo el enlace al código del proyecto Angular de prueba.

  Y aquí tienes el video de youtube, en el que voy desarrollando este ejemplo:

    La internacionalización con Angular tiene otras características más avanzadas como la aplicación del singular y plurar, género, etc, que ya veremos en un posterior artículo.

   Saludos y hasta otra ocasión.