Añadir soporte de varios idiomas a angular

[dieciséis]

Hay dos palabras que a menudo se usan indistintamente cuando se habla de traducir una aplicación, internacionalización y localización, sin embargo, en realidad significan cosas ligeramente diferentes. La internacionalización se refiere al proceso de preparación de su aplicación para respaldar diferentes idiomas. En contraste, la localización se refiere al proceso de traducir realmente su aplicación a sus idiomas requeridos. Esencialmente la internacionalización es algo que realiza una vez por aplicación, y la localización ocurre una vez por localización, al menos ese es el plan.

Estos términos también podrían estar familiarizados en sus versiones acortadas: I18N (donde 18 es el número de letras entre la primera 'I' y la última 'N' de la internacionalización) y L10N (donde 10 es el número de letras entre el 'I' y el 'n' de la localización).

02. ¿Qué es la localización?

Hay más de 6,000 idiomas utilizados en todo el mundo, la mayoría de los cuales solo son utilizados por grupos muy pequeños de personas. Sin embargo, incluso si solo nos centramos en los tres idiomas principales: mandarín, español e inglés: habrá diferencias significativas en el formateo de la fecha, la estructura gramatical, la pluralización y el formato de número.

Si incluimos el quinto idioma más utilizado, el árabe, nos encontramos con otra diferencia; El árabe es un guión de derecha a izquierda (RTL), lo que significa que la UI también tendrá que estar reflejada.

Entonces, durante la localización, tenemos que considerar las diferencias de gramática, diseño y formateo, y, por supuesto, también tenemos que cambiar el texto en sí. Angular puede ayudar con gran parte de esto, pero todavía tendrá que traducir manualmente el texto (y guardar la traducción en almacenamiento en la nube , por lo que es seguro y compartido con su equipo).

03. Locales en angular.

Tendremos que localizar para cada configuración regional que necesitemos para apoyar. Una localidad se refiere al conjunto general de preferencias para las consideraciones mencionadas anteriormente que tienden a ser compartidas dentro de una región del mundo, típicamente un país. Cada configuración regional está representada por un identificador de configuración regional de Unicode, que especifica el código de idioma y la extensión regional.

La localidad predeterminada de Angular es 'EN-EE. UU.', Que es el código de idioma 'en' (inglés) como se habla en la región 'US' (Estados Unidos de América). Una aplicación localizada para 'EN-EE. UU.' Será sutilmente diferente de una aplicación localizada para 'en-GB' que es el inglés como se habla en Gran Bretaña. Por ejemplo, en las fechas de los EE. UU., Se formatean los fechas de los EE. UU., MM / DD / YYYY, mientras que aquí en el Reino Unido usamos el enfoque DD / MM / A YYA más sensible. Esta menor diferencia puede resultar en un error importante en la comprensión.

Para hacer las cosas interesantes, localicemos nuestra aplicación de demostración para el árabe como se habla en Irak, también conocido como 'AR-IQ' e inglés como se habla en el Reino Unido, también conocido como 'en-GB'. Usaremos el inglés como predeterminado esta vez.

04. Construir configuración

Nuestro proyecto de demostración se creó utilizando CLI angular, que incluye algunas herramientas útiles. Vamos a utilizar el compilador a continuación (AOT) para este proyecto, por lo que debemos hacer algunos cambios en el archivo de configuración de CLI: 'angular.json'. Si desea utilizar justo a tiempo (JIT), debe configurar las cosas de manera ligeramente diferente.

Con una compilación AOT, obtendrá una aplicación lista para prestación más rápida y más rápida que se carga sin la necesidad de solicitudes asíncronas para buscar cosas como plantillas y hojas de estilo. Como resultado, debe crear una compilación para cada configuración regional y sirva la compilación apropiada utilizando la URL o algún tipo de lógica de detección de idioma del lado del servidor. El enfoque más simple es crear un directorio para cada localidad, por ejemplo. www.example.com/en-gb y www.example.com/ar-iq. El comercio es que no puede cambiar el idioma sobre la marcha, pero en realidad es poco probable que sea algo requerido por los usuarios reales.

En primer lugar, necesitamos agregar una configuración de compilación para nuestra localidad árabe. En el archivo JSON, busque el objeto 'arquitect.build.configurations'. Agregue el siguiente bloque para definir una configuración para la configuración regional:

 "AR-IQ": {
    "BASEHREF": "/ AR-IQ /",
    "Deployurl": "/ ar-iq /",
    "OutwotPath": "dist / angular-i18n-demo /
AR-IQ ",
    "i18nfile": "src / locale / messages.ar-iq.
xlf ",
    "I18NFormat": "XLF",
    "I18NLOCALE": "AR-IQ" 

Esta configuración le dice a Angular dónde emitir la compilación compilada y qué archivo de traducción y formato para usar. También establece la localidad y le dice a la angular en qué directorio se implementará la aplicación.

También debemos modificar las opciones predeterminadas en 'arquitect.build.options' para usar la configuración regional 'EN-GB'. Establezca las siguientes propiedades como se muestra. Nota Estamos habilitando AOT aquí a través de la Junta, por lo que se utilizará para la producción y las compilaciones de desarrollo:

 "Outputpath": "dist / angular-i18n-demo /
EN-GB ",
  "I18NLOCALE": "EN-GB",
  "Deployurl": "/ en-gb /",
  "BASEHREF": "/ EN-GB /",
  "AOT": VERDADERO 

Angular apoya una serie de lugares. Asegúrese de utilizar el valor correcto para la propiedad 'I18NLOCALE'. Puedes ver la lista completa aquí .

Detrás de las escenas, las configuraciones anteriores simplemente cargan y leen de uno de estos archivos de preferencias de la configuración regional.

05. Servir la configuración

Además de configurar la salida de compilación, también debemos configurar la configuración para el comando 'NG SERVEN' para el desarrollo. Esto es más sencillo, ya que podemos simplemente hacer referencia a la configuración de compilación que acabamos de agregar. En 'angular.json' agregue el siguiente bloque a 'arquitect.serve.configurations':

 "AR-IQ": {
    "BrowserTarget": "angular-i18n-
Demo: Construir: AR-IQ ",
    "SERVIDORIO": "/ AR-IQ /"
  } 

Aquí estamos remitiendo las opciones de configuración de compilación con la propiedad 'BrowserGet', y también estamos configurando el 'Sirvedor'. Antes de que podamos servir o construir la aplicación árabe, necesitamos crear el archivo de traducciones a las que se hace referencia en la propiedad 'I18NFile' arriba. La CLI angular incluye una herramienta para extraer texto marcado en un archivo de origen de traducción estándar de la industria.

Cubriremos estos archivos con más detalle más adelante en el tutorial, pero por ahora solo necesitamos exportar el archivo básico y vacío para permitirnos compilar.

Usaremos el comando 'ng xi18n' con las siguientes opciones. Esta es la única vez que incluiremos el ID de la configuración regional en el nombre de archivo'-Out-File ':

 $ ng XI18N - STOPPUT-RAYA LOCALE - ARCHIVO
mensajes.ar-iq.xlf --i18n-locale ar-iq 

Esto debería crear un archivo en un directorio SRC / lugar de localización. A partir de ahora, siempre emitiremos el archivo llamado 'mensajes.xlf' y copiarlo manualmente sobre la versión con el ID de la configuración regional en el nombre. La razón de esto es evitar que la herramienta de extracción sobrescribe cualquier traducción existente que hemos agregado al archivo.

06. Configuración de conmutación

En este punto, ahora podemos compilar el proyecto y ver qué sucede, pero debemos decirle al comando 'NG SERVEN' que la configuración debe usar. Primero echemos un vistazo a la versión en inglés. No hay cambios aquí porque el inglés es el valor predeterminado:

 $ ng servir 

Como puede ver, se parece a la versión original, que utiliza la configuración predeterminada de 'EN-US' de Angular. La diferencia notable es que la moneda ahora especifica US $ en lugar de solo $. Está bien, ahora vamos a probar la versión árabe. Detener la versión en inglés y ejecute:

 $ ng Servir --Configuración = AR-IQ 

Como lo haría, hay diferencias más obvias en esta versión, en particular la fecha ahora está escrita en árabe. Angular puede hacer esto porque los nombres de algunas cosas, como meses y días, son de una lista establecida y, en última instancia, se relacionan con un número conocido. Todo lo demás, sin embargo, todavía está en inglés.

07. Tubos de conciencia regional

Mire más de cerca el código fuente de 'app.component.html' y verá que usamos una serie de tubos diferentes. Los siguientes tubos angulares son conscientes de la forma local, lo que significa que adaptan su producción basada en la configuración regional actual: 'fecha de fecha', 'CurrentyPipe', 'Decimalpipe' y 'Pippipe'.

Si usa estos tubos, cuidadosamente angular, manejarán muchos de los trabajos de Localización para usted. Con cuidado, nos referimos a utilizar las opciones predefinidas disponibles dondequiera que pueda. Un buen ejemplo es el formato de Fecha del UK vs Reino Unido que mencionamos anteriormente. Si está en el Reino Unido y desea mostrar una fecha con el formato (sensible) Día-mes-año, es posible que esté frustrado para encontrar que la opción '' ShortDate '' predefinida se realiza como M / D / YY (por ejemplo, . 10/9/18) y tenga la tentación de codificar su formato deseado como este:

 {{Mydate | Fecha: 'DD / MM / Y'}} 

Pero ahora sabemos que obtenemos el formato M / D / YY porque Angular usa la configuración regional 'EN-US' de forma predeterminada. Entonces, en lugar de codificar el formato, debemos usar la opción '' ShortDate '' y localizar nuestra aplicación para usar 'EN-GB'.

 {{Mydate | Fecha: 'ShortDate'}} 

Se necesita un poco más de esfuerzo, pero luego podemos agregar locales al contenido de nuestro corazón y siempre tener un formato de fecha fácil de usar.

08. Anulando las opciones predefinidas

Lamentablemente, no parece que haya una forma fácil, incorporada de anular un formato predefinido. Por ejemplo, no puede simplemente decidir que prefiere que prefiera el formato '' ShortDate '' para ser DD / MM / YYYY en lugar de DD / MM / Y, ya que no hay forma de modificar el formato en tiempo de ejecución. Además, no puedes agregar tus propias opciones predefinidas.

Para estos casos de borde, puede crear una tubería de fecha personalizada que envuelve la "fecha de fecha" angular y maneja los formatos personalizados por locales. Cualquier cosa que no reconozca se transmitirá a la 'fecha de fecha' incorporada.

09. CURENCHYPIPIPE

Fuera de la plataforma, la 'CurrentyPipe' formateará un número como dólares estadounidenses, recortará dos lugares decimales y agregará agrupaciones según lo definido en las preferencias de la localidad.

Notará que en nuestros locales la moneda siempre está en dólares estadounidenses. No cambia mágicamente a Sterling (GBP) cuando usa la configuración regional 'EN-GB'. La razón de esto es que £ 10 no es lo mismo que $ 10, por lo que debe especificar explícitamente la moneda que se refiere su número.

Vamos a actualizar 'app.component.html' para usar GBP en todo. Al especificar el código de moneda, debe usar el valor correcto de la norma ISO 4217 (lista disponible en línea).

Modifique las dos tuberías monetarias agregando ':' GBP '' así:

 {{Value $ | async | Moneda: 'GBP'}} 

Y comenzarás a ver el símbolo de £ en lugar de US $.

Recuerde, no hace nada inteligente como convertirse automáticamente con el valor equivalente en GBP si cambia la moneda, solo cambia el símbolo que usa.

10. Flujo de trabajo de traducción

De acuerdo, así que tenemos nuestros dos locales configurados y angular, está ayudando a hacer algo de trabajo para nosotros fuera de la caja, pero el texto todavía está en inglés. Angular no puede traducir esto automáticamente, tristemente, pero puede ayudarnos con partes del flujo de trabajo. Esto es lo que tiene que pasar:

• Bandera de texto estático en todos los componentes para traducción
• Archivo de traducción de exportación que contiene este texto estático
• Modifique el archivo de traducción y agregue las traducciones correspondientes.
• Merge el archivo de traducción traducido a la aplicación

Angular nos ayuda con los pasos 2 y 4, pero como desarrolladores necesitamos hacer el paso 1 manualmente. El Paso 3 normalmente se completaría por un profesional de traducción o agencia, utilizando un software especial para leer y actualizar el archivo de traducción.

11. Detalles del eje

Para lograr esto, tenemos que agregar un atributo especial a cada elemento que contenga texto fijo que se debe traducir. Para ser claro si el contenido llega de una API, entonces eso no es un texto fijo y tendría que localizar eso en la API. Solo necesita agregar el atributo cuando el texto se escriba directamente en la plantilla HTML en su código fuente. Aquí, un punto clave es que debe intentar mantener los archivos de TIPSIPS LOCALE-AGNOSTIC, en otras palabras, evite poner cualquier texto que se debe traducir en la lógica de los componentes y mantenerlo todo en las plantillas. De lo contrario, la herramienta de extracción no podrá extraerla. De todos modos, es una buena práctica para separar sus inquietudes, en la vida y en el código.

Abramos 'App.component.html' y comience con el título 'Valor actual'. Simplemente agregue el atributo 'i18n' al elemento que contiene directamente el texto.

 & lt; div clase = "meta__title" i18n & gt;
     Valor actual
   & lt; / DIV & GT; 

Es importante entender que este es solo un atributo personalizado 'tonto'. No es una directiva angular que desencadena nada en tiempo de ejecución, de hecho, el compilador lo elimina después de la traducción.

De todos modos, veamos lo que sucede cuando ejecutamos la herramienta de extracción nuevamente para regenerar el archivo de traducción. Recuerde '- SOUT-FILE' es solo 'mensajes.xlf' ahora:

 $ ng XI18N - STOPPUT-RAYA LOCALE - ARCHIVO
Mensajes.xlf --i18n-locale ar-iq 

Abra el archivo XLF de salida y debe ver un nuevo bloque de unidad de traducción que parece algo así con una información adicional de contexto adicional:

 & lt; Trans-Unit ID = "FACE3D45C0F0CD38B726E7798DA15
3E2F8D55551 "DataType =" HTML "& GT;
    & lt; fuente y gt;
      Valor actual
    & lt; / Source & GT; 

Genial, eso significa que la herramienta recogió el atributo 'I18N'. Esa ID larga es generada por la herramienta y se mantendrá igual a menos que cambie el texto. Si tiene múltiples instancias exactamente del mismo texto, todos obtendrán la misma ID. ¡No edite esta identificación!

Si lo prefiere, puede especificar un ID personalizado dentro del atributo 'I18N'. Si lo hace, la identificación seguirá siendo la misma, incluso si el texto cambia, por lo que debe asegurarse de que no tiene ninguna colisión de ID a lo largo de su aplicación. Use el prefijo '@@' para establecer un ID personalizado. Aquí la identificación se convertirá en 'Título':

 & lt; div class = "meta__title" i18n = "@@ title" & gt;
     Valor actual
   & lt; / DIV & GT; 

12. Añadir un poco de contexto.

Para garantizar que el traductor pueda proporcionar una traducción precisa, a menudo necesitarán saber el contexto en el que se está utilizando el texto. El atributo 'I18N' nos permite definir una descripción y un significado para ayudar al traductor. El formato es el siguiente:

 & lt; DIV I18N = "Significado | Descripción @@
customid "& gt; text & lt; / div & gt; 

Vamos a actualizar nuestro título con un significado y descripción:

 & lt; div class = "meta__title" i18n = "tarjeta
Título | Valor en este momento en el tiempo @@ Título "& GT;
     Valor actual
   & lt; / DIV & GT; 

Eso debería darle suficiente contexto del traductor para proporcionar una traducción precisa. Regenere el archivo de traducción y debe ver que estos valores han sido emitidos. Vale la pena señalar que si no usa una identificación personalizada, la identificación generada toma en cuenta el significado y el texto. Así que el mismo texto, pero con un significado diferente, obtendrá una identificación diferente. La descripción, sin embargo, no tiene impacto en la identificación.

13. Texto con variables.

Vamos a pasar a la sección de introducción. El primer párrafo contiene texto y una variable que se interpolará en tiempo de ejecución. Como manejamos esto?

Bueno, felizmente es bastante sencillo. Nuevamente debemos agregar un atributo significativo 'I18N' al elemento que contiene. Agreguelo directamente al elemento del párrafo:

 & lt; P i18n = "valor de cierre | valor cuando el mercado
cerrado ayer @@ ClosingValue "& GT;
Ejecute nuevamente la herramienta de extracción y verá esta nueva unidad de traducción:
  & lt; Trans-Unit ID = "ClosingValue"
DataType = "HTML" & GT;
    & lt; fuente y gt; ayer & amp; el valor de cierre de los apos era
& lt; x id = "interpolation" equiv-text = "{{
ClosingValue | Moneda: & amp; APOS; GBP & AMP; APOS;
}} "/ & gt ;. & lt; / source & gt; 

Vea cómo se detalla la interpolación variable en la salida. Lo bueno de esto es que permite al traductor modificar la estructura gramatical de la oración si es necesario, sin romper la unión. Por ejemplo, puede haber un idioma donde la oración se escribiera mejor: X Valor fue el cierre de ayer, es decir, con la variable al inicio.

14. Pluralización

Pasando al siguiente párrafo, verás alguna sintaxis intimidante. Esto se denomina formato de mensaje de la UCI y le permite especificar diferentes trozos de texto en función del valor de una variable.

Puede usar esto para agregar los 's' a las palabras en inglés cuando el valor sea cero o no uno. Por ejemplo, si los 'segundos' es una variable que contiene el número de segundos que podemos usar esta expresión de pluralización de la UCI:

 {{segundos}} {segundos, plural, uno
{segundo}, otros {segundos}} 

Que emitirá:

• 0 segundos
• 1 segundo
• 2 segundos

No parece estar documentado, pero también puede usar el 'asyncpipe' dentro de la sintaxis de pluralización para trabajar con observables.

En ese ejemplo, 'uno' y 'otro' son categorías de pluralización. Hay una serie de categorías para elegir, ¡pero cuidado! No todos los locales admiten todas las categorías, y Angular no le indica si intenta usar una categoría que no es compatible con la configuración regional actual. Es fácil terminar pensando que ha hecho algo incorrecto porque la categoría 'Dos' no está funcionando en su lugar 'EN-GB' y en su lugar está viendo el texto 'Otro'. Inexplicablemente 'en' (y muchos otros idiomas comunes) solo el apoyo 'uno' y 'otro', aunque 'cero' y 'dos' son valores explícitos.

Echa un vistazo a este archivo Para ver lo que realmente se apoya.

15. Los múltiples gráficos de barra radial.

Podemos solucionar esta limitación utilizando números en lugar de categorías. Solo prefijo el valor con un '=':

 Hay {observadores, plural, = 0 {no es nadie} = 1
{es una persona} = 2 {son dos personas}
    Otros {son {{Watchers}} People}}
mirando ahora mismo. 

Esto ya está configurado en la aplicación de demostración, solo necesitamos agregar el atributo 'I18N' al párrafo que contiene:

 & LT; P i18n = "Watchers | Número de personas
viendo el valor @@wewers "& gt; 

Ejecute la herramienta de extracción nuevamente para ver cómo se ve esto. Verás que esto se produce ligeramente de manera diferente. Se creará dos unidades de traducción; uno para la expresión de la UCI en sí y uno que interpone esa expresión en la cadena original.

16. Seleccione Expresión

Si desea mostrar un texto diferente, dependiendo del valor de una variable, puede usar una expresión de ICU 'Seleccionar' que es muy similar a la sintaxis 'plural' demostrada anteriormente. En nuestra aplicación de demostración, monitoreamos el cambio aplicado al valor y creamos un flujo observable llamado 'tendencia $' que sale 'para arriba', 'abajo' o 'estable' dependiendo de si el cambio es positivo, negativo o cero.

Luego conectamos nuestra expresión de UCI 'Seleccionar' para generar una cadena diferente según el valor de la transmisión. Aquí puedes ver el 'asyncpipe' en uso:

 El valor {tendencia $ | Async, seleccione, UP
{aumentado} abajo {disminuido} estable
    {no cambió}} 

Esta es una sintaxis algo más limpia que usar 'NGIF' o 'ngswitch' para manipular el DOM, además, también se reproduce muy bien con la herramienta de extracción. Agregue el atributo 'I18N' al elemento que contiene:

 & lt; div clase = "card__info" i18n = "value
Trend | Describe el valor cambio de tendencia @@ tendencia "& gt; 

Regenera el archivo de traducciones y verá que el enfoque es similar a la salida plural, con dos unidades de traducción creadas. Las expresiones de la UCI son bastante útiles una vez que se acostumbra a ellos, además de que puede anidarlos para crear más salidas complejas.

17. Añadir traducciones

Un atributo más 'I18N' para agregar:

 & lt; div clase = "card__info" i18n = "transacciones
cuenta | Número de transacciones hoy @@
Transacciones "& gt;
     Transacciones: {{TROSACCIONES $ | async |
número }}
   & lt; / DIV & GT; 

Ahora hemos marcado todo el texto que necesita traducir, podemos generar el archivo de traducción una última vez. Una vez que se crea, cambie el nombre de 'Mensajes.ar-iq.xlf' y reemplace la Encarnación anterior. Este es el archivo que le enviaremos al profesional de la traducción, pero a los efectos de este tutorial, Google Translate estará de pie.

Abra el archivo XLF y duplique cada "& lt; Source & GT; ' Elemento, renombrándolo '& lt; Target & GT;'. Desafortunadamente, puede ser bastante desordenado para que pueda ayudar a embellecer los contenidos.

Para verificar, los tenemos a todos, guarde el archivo y inicie la aplicación con la configuración regional árabe:

 $ ng Servir --Configuración = AR-IQ 

Si ve algún mensaje en el terminal como este, eso significa que ha perdido uno:

 Error en los errores de análisis XLIFF: MENSAJE * ID *
se pierde una traducción ("

Esperemos que no tenga errores y podrás ver la aplicación en el navegador. No hemos agregado ningún árabe real, por lo que no se verá muy diferente.

18. Google Translate

Comencemos con algo fácil: el título 'Valor actual'. Google Translate me dice que debería ser (texto árabe aquí), así que actualice el valor en el '& lt; Target & GT;' elemento:

 & lt; Source & GT; Valor actual & LT; / Source & GT;
       & lt; Target & GT; Texto árabe aquí & lt; / Target & GT; 

Hasta ahora tan bueno. Ahora vamos a hacer uno con interpolación. Aquí está "El valor de cierre de ayer fue ..." (¡con suerte!):

 & lt; Target & GT; texto árabe aquí & lt; x
id = "interpolación" Equiv-Text = "{{ClosingValue
| Moneda: & amp; APOS; GBP & AMP; APOS; }} "/> ;.< ;/target> ;

Use un número cuando se traduce para que pueda ver dónde debe ser la interpolación. Observe que cuando vea el resultado traducido en Google Translate, aparecerá invertido, es decir, el número al inicio, pero cuando copia y la pegará en el archivo de traducción, volverá al pedido original. Esto está sucediendo porque el árabe es un lenguaje RTL, por lo que el guión está (casi) completamente reflejado. Google Translate hace esto agregando un atributo 'dir = "rtl"' al elemento que contiene. Aprenderemos cómo hacer esto en el siguiente paso. El resto de las traducciones están disponibles en la sucursal de Demo Repo, 'Tutorial'.

19. Dirección de guión

Necesitamos administrar la dirección del script en nuestra aplicación porque Angular no lo hará automáticamente para nosotros. También no parece haber ninguna forma de detectar si la configuración regional actual es un idioma de LTR o RTL, por lo que deberemos codificar esto. Sería genial si Angular ofreciera una directiva incorporada para esto.

Abre 'app.component.ts'. Importar 'inyectar', 'locale_id' y 'hostbinding' de '' @ angular / núcleo ''. Luego configure el 'hostbinding' de la siguiente manera. Esto agregará un atributo 'dir' al componible AppCponent y configurar la dirección de idioma predeterminada a 'LTR':

 @Hostbinding ('attr.dir') dir = 'ltr'; 

A continuación, agregue un constructor e inyecte el 'locale_id'. Recuerde que esto se establece en nuestra configuración porque estamos usando AOT.

 Constructor (@Inject (locale_id) regional privado: cadena) {} 

Y finalmente agregue el siguiente fragmento al método 'ngoninit' existente. Aquí estamos comprobando si el 'locale_id', es decir, 'AR-IQ', comienza con 'AR' y si cambia la dirección a 'RTL' en su lugar.

 if (esto.locale.sartswith ('ar')) {
     este.dir = 'rtl';
} 

Si planea respaldar más locales, es probable que necesites refactorizarlo para que sea más escalable, ya que solo hay unos diez idiomas RTL en uso. Este enfoque no debería ser demasiado difícil de manejar. Inicie la aplicación árabe y ahora debe ver que la UI está reflejada: el signo de £ debe estar a la derecha.

20. Producción

El paso final es generar y revisar nuestras compilaciones de producción. Primero, sin embargo, debemos hacer otra modificación rápida a la configuración 'angular.json'.

En 'arquitecto.build.configurations' duplica el objeto de producción existente y la renombra "" Production-AR-IQ "'. Luego, copie y pegue las propiedades de la configuración '"AR-IQ" existente en el objeto, para que tenga tanto las opciones de producción como las opciones' I18N '.

También necesita actualizar 'arquitect.serve.configurations' también. Esta vez duplica el objeto '"AR-IQ" existente y cambie el nombre' "Production-AR-IQ" 'y cambie el valor' BrowserGet 'para apuntar a su nueva configuración' Production-AR-IQ '.

Ahora puede construir y servir a su plan de producción en árabe con este comando:

 $ ng servir --configuration = producción-ar-iq 

De acuerdo, estamos terminados! Hemos internacionalizado con éxito nuestra aplicación y lo hemos localizado para la audiencias 'en-GB' y 'AR-IQ'. ¡Angular hace que el proceso sea notablemente directo para el desarrollador, de hecho, el bit más difícil es averiguar cuáles deben ser las traducciones: disculpas a cualquier altavoces árabe si algo está mal!

Este artículo se publicó originalmente en la emisión 281 de Creative Web Design Magazine Web Designer. Comprar emito 281 aquí o Suscríbete al diseñador web aquí .

Artículos relacionados:

• Cómo construir un sitio web de páginas completa en Angular
• Las mejores computadoras portátiles para la programación en 2019.
• Cómo construir una aplicación