[i18n] Implementar ngx-translate en un proyecto Angular 7

Hola! Hoy te presento una forma de implementar i18n en tu proyecto Angular y esta forma es utilizando la libreria de terceros llamada *ngx-translate*

Es muy sencillo, te los mostraré en 5 pasos y asumiré que ya tienes creado tu proyecto Angular:

PASO 1: Instalar la librería en tu proyecto:

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

PASO 2: Importar ngx-translate en app.module.ts
Tu app.module.ts quedaría así:

PASO 3: Inyectar TranslateService en app.component.ts
Tu app.component.ts quedaría así


Nota que le agregué una función que hace el switch de idioma. Podrías Llamar a esta función desde un botoncito o desde otro control.

PASO 4: Crear los archivos JSON por cada idioma.
Recomendación: podrías ubicar estos archivos en la siguiente ruta: assets/i18n/en.json

Un ejemplo:


PASO 5: Editar los templates (HTML) y agregar los translate
Y como último paso, usamos los translations y tenemos dos alternativas: usando pipes o directivas. Me gusta más los pipes. Quedaría así:


Y voilà! Eso es todo.

Hay algunas herramientas que podrían serte de ayuda en el sitio oficial: ngx-translate.com

i18n for react app

Para configurar internationalization en una aplicación REACT, ursaremos la librería react-intl

1. Ejecutamos el siguiente comando en nuestra aplicación react para instalar la librería:

npm install react-intl

2. Creamos los archivos json donde estarán los labels por cada idioma. Yo los creo en la siguiente ruta:

src\i18n\locales\en.json
src\i18n\locales\es.json


3. Modificamos el archivo index.tsx (si estas usando typescript o index.js si estás usando javascript)
En este archivo haremos algunos imports, wrapearemos nuestra app (IntlProvider), y mandaremos como parámetros el idioma y de acuerdo a eso el archivo json que deberá leer. Sin tantas vueltas, debería quedar así:
4. Agregamos una función util que nos servirá para el tema de standard json notation. La función es flattenMessages:

5. Utilizamos los labels traducidos:
Hacemos un impor en el componente que vayamos a utilizarlo:

<FormattedMessage id="sign.in.forgot.password" />

Como ID nos basaremos en el JSON file que hemos estructurado previamente. También tiene otros parámetros, pero para mi caso me fue suficiente utilizar *id*