Cómo localizar aplicaciones Angular usando RxWeb

Aprende a internacionalizar / localizar aplicaciones Angular usando RxWeb para generar traducciones, un módulo de código simple, fácil de mantener, que permite lazy load, traducción por URL o por código, traducción de mensajes de error FormControl, extracción de claves, optimización de JSON, etc.

Texto original de Ushmi Dave, publicado en Medium

***

RxWeb Translate: una forma elegante de localizar / internacionalizar aplicaciones Angular

La localización en una aplicación angular puede aumentar su eficiencia para resolver los problemas de negocio, ya que ayuda a que el software se vincule a las personas a través de su localidad o idioma.

Las aplicaciones traducidas tienen la capacidad de centrarse en los usuarios que tienen diferentes idiomas, culturas y lugares. En este artículo voy a discutir la implementación de la internacionalización en aplicaciones Angular utilizando @rxweb/translate.

Indice

1. Cómo garantizar Mantenibilidad y Consistencia
2. Mantener separados código fuente / hilos de traducción
3. Resolver de forma global datos traducidos, establecer el idioma por defecto y añadir idiomas
4. Seguir las prácticas y normas de codificación correctas

Inicio

Empieza por instalar el paquete:

npm install @rxweb/translate

Cómo registrar el módulo

Importa el Translate generado en app.module.ts como se indica a continuación:

Para registrar el módulo en la aplicación, importa TranslateModule y también wellapp.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import { RxWebModule } from './rxweb.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
     RxTranslateModule.forRoot({  
      cacheLanguageWiseObject: true,
      globalFilePath: "assets/i18n/{{language-code}}/global.{{language-code}}.json",
      filePath: "assets/i18n/{language-code}}/translation-name}}.{{language-code}}.json"})
  ],
  providers: [RxTranslateModule],
  exports: [RxTranslateModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

El archivo RxTranslateModule contiene propiedades cuyo uso se explica a continuación:

1. cacheLanguageWiseObject : Escoge true para mantener cacheadas las claves de traducción y aumentar así el rendimiento.
2. globalFilePat: Define el archivo de traducción global para resolver los objetos de traducción global por componentes, por ejemplo: para en (global.en.json)
3. filePath : Establece la ruta del archivo para resolver los objetos de traducción en cada módulo con respecto a su nombre de traducción, por ejemplo: para login(login.en.json)

Cómo resolver Datos Globales de Traducción :

En el componente de la aplicación, resuelve @translate para obtener los datos globales traducidos

app.component.ts:

import { Component } from '@angular/core';
import { translate } from '@rxweb/translate';
@Componente({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   @translate() global: any;
}

Vincula el texto :

Vincula el texto basado en el objeto resuelto en el componente de la aplicación, utilizando la vinculación de dos vías (Interpolación) de angular

app.component.html:

{{global.Title}}

Forma el Json :

Los objetos de traducción se resuelven a partir de la ruta del archivo global. La estructura de los archivos json es la siguiente:

Puedes generar el json en los archivos como claves basadas en el contenido multilingüe que desees. Si, por ejemplo, que estás traduciendo tu contenido a 2 idiomas (en y fr), entonces el título generaría así:

Traducción:

Este es el resultado del código anterior. Puedes ver un ejemplo básico completo en stackblitz

Cómo resolver Datos de Traducción basados en Componentes:

En el componente resuelve el objeto @translate para obtener los datos traducidos basados en el nombre de la traducción. Aquí hay un ejemplo de un componente de inicio de sesión, por lo que aquí el nombre de la traducción será login

login.component.ts

import { Component, OnInit } from '@angular/core';
import { translate, RxTranslation } from '@rxweb/translate';
@Componente({
  selector: 'app-login-component',
  templateUrl: './componente-de-inicio-de-sesión.component.html',
  styleUrls: ['./componente-de-inicio-de-sesión.componente.css']
})
export class LoginComponent implements OnInit {
  @translate({translationName:'login'}) login: any;
  constructor(){
  }
}

Vincula el texto:

Vincula el texto basado en el objeto resuelto en el componente de inicio de sesión, de la misma manera que la traducción global, utilizando el objeto de inicio de sesión.

app.component.html:

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">{{login.emailLabel}}</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">{{login.emailNoteText}}</small>
    </div> <div>
    <div class="form-group">
        <label for="exampleInputPassword1">{{login.passwordLabel}}</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div> <div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">{{login.checkOutText}}</label>
    </div> <div>
    <button type="submit" class="btn btn-primary">{{login.submitText}}</button>
</form>

Forma el Json:

Los objetos de traducción se resuelven a partir de la ruta del archivo. La estructura de los archivos json es la siguiente:

Forma el json en los archivos como las claves basadas en el contenido multilingüe que deseas. Si, por ejemplo, estás traduciendo tu contenido a 2 idiomas (en y fr), entonces el título se formaría así:

Traducción:

A continuación se muestra la salida del componente de inicio de sesión:

Características

• Código de traducción simple, mantenible y legible.
• Carga perezosa (lazyload) del contenido del componente de traducción con Angular PreLoadModule.
• Traducción de idiomas por URL o por código.
• Traducción de mensajes de error FormControl.
• Potente CLI con las características de Extracción de Claves, Optimización de JSON, etc.

Averigua cómo implementar todas las características de rxweb translate en:docs