diff --git a/adev-es/src/app/routing/sub-navigation-data.ts b/adev-es/src/app/routing/sub-navigation-data.ts index fb15704..61b1772 100644 --- a/adev-es/src/app/routing/sub-navigation-data.ts +++ b/adev-es/src/app/routing/sub-navigation-data.ts @@ -591,60 +591,60 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [ ], }, { - label: 'Internationalization', + label: 'Internacionalización', children: [ { - label: 'Overview', + label: 'Visión general', path: 'guide/i18n', contentPath: 'guide/i18n/overview', }, { - label: 'Add the localize package', + label: 'Agregar el paquete localize', path: 'guide/i18n/add-package', contentPath: 'guide/i18n/add-package', }, { - label: 'Refer to locales by ID', + label: 'Referirse a configuraciones regionales por ID', path: 'guide/i18n/locale-id', contentPath: 'guide/i18n/locale-id', }, { - label: 'Format data based on locale', + label: 'Formatear datos según la configuración regional', path: 'guide/i18n/format-data-locale', contentPath: 'guide/i18n/format-data-locale', }, { - label: 'Prepare component for translation', + label: 'Preparar un componente para traducción', path: 'guide/i18n/prepare', contentPath: 'guide/i18n/prepare', }, { - label: 'Work with translation files', + label: 'Trabajar con archivos de traducción', path: 'guide/i18n/translation-files', contentPath: 'guide/i18n/translation-files', }, { - label: 'Merge translations into the app', + label: 'Fusionar traducciones en la aplicación', path: 'guide/i18n/merge', contentPath: 'guide/i18n/merge', }, { - label: 'Deploy multiple locales', + label: 'Desplegar múltiples configuraciones regionales', path: 'guide/i18n/deploy', contentPath: 'guide/i18n/deploy', }, { - label: 'Import global variants of the locale data', + label: 'Importar variantes globales de los datos de configuración regional', path: 'guide/i18n/import-global-variants', contentPath: 'guide/i18n/import-global-variants', }, { - label: 'Manage marked text with custom IDs', + label: 'Gestionar texto marcado con IDs personalizados', path: 'guide/i18n/manage-marked-text', contentPath: 'guide/i18n/manage-marked-text', }, { - label: 'Example Angular application', + label: 'Ejemplo de aplicación de Angular', path: 'guide/i18n/example', contentPath: 'guide/i18n/example', }, diff --git a/adev-es/src/content/guide/i18n/add-package.en.md b/adev-es/src/content/guide/i18n/add-package.en.md new file mode 100644 index 0000000..325c565 --- /dev/null +++ b/adev-es/src/content/guide/i18n/add-package.en.md @@ -0,0 +1,35 @@ +# Add the localize package + +To take advantage of the localization features of Angular, use the [Angular CLI][CliMain] to add the `@angular/localize` package to your project. + +To add the `@angular/localize` package, use the following command to update the `package.json` and TypeScript configuration files in your project. + + + +It adds `types: ["@angular/localize"]` in the TypeScript configuration files. +It also adds line `/// ` at the top of the `main.ts` file which is the reference to the type definition. + +HELPFUL: For more information about `package.json` and `tsconfig.json` files, see [Workspace npm dependencies][GuideNpmPackages] and [TypeScript Configuration][GuideTsConfig]. To learn about Triple-slash Directives visit [Typescript Handbook](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-). + +If `@angular/localize` is not installed and you try to build a localized version of your project (for example, while using the `i18n` attributes in templates), the [Angular CLI][CliMain] will generate an error, which would contain the steps that you can take to enable i18n for your project. + +## Options + +| OPTION | DESCRIPTION | VALUE TYPE | DEFAULT VALUE +|:--- |:--- |:------ |:------ +| `--project` | The name of the project. | `string` | +| `--use-at-runtime` | If set, then `$localize` can be used at runtime. Also `@angular/localize` gets included in the `dependencies` section of `package.json`, rather than `devDependencies`, which is the default. | `boolean` | `false` + +For more available options, see `ng add` in [Angular CLI][CliMain]. + +## What's next + + + + + +[CliMain]: cli "CLI Overview and Command Reference | Angular" + +[GuideNpmPackages]: reference/configs/npm-packages "Workspace npm dependencies | Angular" + +[GuideTsConfig]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html "TypeScript Configuration" diff --git a/adev-es/src/content/guide/i18n/add-package.md b/adev-es/src/content/guide/i18n/add-package.md index 325c565..cb12312 100644 --- a/adev-es/src/content/guide/i18n/add-package.md +++ b/adev-es/src/content/guide/i18n/add-package.md @@ -1,31 +1,31 @@ -# Add the localize package +# Agregar el paquete localize -To take advantage of the localization features of Angular, use the [Angular CLI][CliMain] to add the `@angular/localize` package to your project. +Para aprovechar las características de localización de Angular, usa el [CLI de Angular][CliMain] para agregar el paquete `@angular/localize` a tu proyecto. -To add the `@angular/localize` package, use the following command to update the `package.json` and TypeScript configuration files in your project. +Para agregar el paquete `@angular/localize`, usa el siguiente comando para actualizar los archivos `package.json` y de configuración de TypeScript en tu proyecto. -It adds `types: ["@angular/localize"]` in the TypeScript configuration files. -It also adds line `/// ` at the top of the `main.ts` file which is the reference to the type definition. +Esto agrega `types: ["@angular/localize"]` en los archivos de configuración de TypeScript. +También agrega la línea `/// ` al inicio del archivo `main.ts`, que es la referencia a la definición de tipos. -HELPFUL: For more information about `package.json` and `tsconfig.json` files, see [Workspace npm dependencies][GuideNpmPackages] and [TypeScript Configuration][GuideTsConfig]. To learn about Triple-slash Directives visit [Typescript Handbook](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-). +ÚTIL: Para más información sobre los archivos `package.json` y `tsconfig.json`, consulta [Dependencias npm del espacio de trabajo][GuideNpmPackages] y [Configuración de TypeScript][GuideTsConfig]. Para aprender sobre las directivas Triple-slash visita el [Manual de TypeScript](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-). -If `@angular/localize` is not installed and you try to build a localized version of your project (for example, while using the `i18n` attributes in templates), the [Angular CLI][CliMain] will generate an error, which would contain the steps that you can take to enable i18n for your project. +Si `@angular/localize` no está instalado e intentas construir una versión localizada de tu proyecto (por ejemplo, mientras usas los atributos `i18n` en templates), el [CLI de Angular][CliMain] generará un error que contendrá los pasos que puedes seguir para habilitar i18n en tu proyecto. -## Options +## Opciones -| OPTION | DESCRIPTION | VALUE TYPE | DEFAULT VALUE +| OPCIÓN | DESCRIPCIÓN | TIPO DE VALOR | VALOR PREDETERMINADO |:--- |:--- |:------ |:------ -| `--project` | The name of the project. | `string` | -| `--use-at-runtime` | If set, then `$localize` can be used at runtime. Also `@angular/localize` gets included in the `dependencies` section of `package.json`, rather than `devDependencies`, which is the default. | `boolean` | `false` +| `--project` | El nombre del proyecto. | `string` | +| `--use-at-runtime` | Si se establece, entonces `$localize` puede usarse en runtime. Además `@angular/localize` se incluye en la sección `dependencies` de `package.json`, en lugar de `devDependencies`, que es el valor predeterminado. | `boolean` | `false` -For more available options, see `ng add` in [Angular CLI][CliMain]. +Para más opciones disponibles, consulta `ng add` en el [CLI de Angular][CliMain]. -## What's next +## Próximos pasos - + [CliMain]: cli "CLI Overview and Command Reference | Angular" diff --git a/adev-es/src/content/guide/i18n/deploy.en.md b/adev-es/src/content/guide/i18n/deploy.en.md new file mode 100644 index 0000000..9cb41ac --- /dev/null +++ b/adev-es/src/content/guide/i18n/deploy.en.md @@ -0,0 +1,42 @@ +# Deploy multiple locales + +If `myapp` is the directory that contains the distributable files of your project, you typically make different versions available for different locales in locale directories. +For example, your French version is located in the `myapp/fr` directory and the Spanish version is located in the `myapp/es` directory. + +The HTML `base` tag with the `href` attribute specifies the base URI, or URL, for relative links. +If you set the `"localize"` option in [`angular.json`][GuideWorkspaceConfig] workspace build configuration file to `true` or to an array of locale IDs, the CLI adjusts the base `href` for each version of the application. +To adjust the base `href` for each version of the application, the CLI adds the locale to the configured `"subPath"`. +Specify the `"subPath"` for each locale in your [`angular.json`][GuideWorkspaceConfig] workspace build configuration file. +The following example displays `"subPath"` set to an empty string. + + + +## Configure a server + +Typical deployment of multiple languages serve each language from a different subdirectory. +Users are redirected to the preferred language defined in the browser using the `Accept-Language` HTTP header. +If the user has not defined a preferred language, or if the preferred language is not available, then the server falls back to the default language. +To change the language, change your current location to another subdirectory. +The change of subdirectory often occurs using a menu implemented in the application. + +For more information on how to deploy apps to a remote server, see [Deployment][GuideDeployment]. + +IMPORTANT: If you are using [Server rendering](guide/ssr) with `outputMode` set to `server`, Angular automatically handles redirection dynamically based on the `Accept-Language` HTTP header. This simplifies deployment by eliminating the need for manual server or configuration adjustments. + +### Nginx example + +The following example displays an Nginx configuration. + + + +### Apache example + +The following example displays an Apache configuration. + + + +[CliBuild]: cli/build "ng build | CLI | Angular" + +[GuideDeployment]: tools/cli/deployment "Deployment | Angular" + +[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular" diff --git a/adev-es/src/content/guide/i18n/deploy.md b/adev-es/src/content/guide/i18n/deploy.md index 9cb41ac..9d229d0 100644 --- a/adev-es/src/content/guide/i18n/deploy.md +++ b/adev-es/src/content/guide/i18n/deploy.md @@ -1,37 +1,37 @@ -# Deploy multiple locales +# Desplegar múltiples configuraciones regionales -If `myapp` is the directory that contains the distributable files of your project, you typically make different versions available for different locales in locale directories. -For example, your French version is located in the `myapp/fr` directory and the Spanish version is located in the `myapp/es` directory. +Si `myapp` es el directorio que contiene los archivos distribuibles de tu proyecto, normalmente haces que diferentes versiones estén disponibles para diferentes configuraciones regionales en directorios de configuración regional. +Por ejemplo, tu versión en francés está ubicada en el directorio `myapp/fr` y la versión en español está ubicada en el directorio `myapp/es`. -The HTML `base` tag with the `href` attribute specifies the base URI, or URL, for relative links. -If you set the `"localize"` option in [`angular.json`][GuideWorkspaceConfig] workspace build configuration file to `true` or to an array of locale IDs, the CLI adjusts the base `href` for each version of the application. -To adjust the base `href` for each version of the application, the CLI adds the locale to the configured `"subPath"`. -Specify the `"subPath"` for each locale in your [`angular.json`][GuideWorkspaceConfig] workspace build configuration file. -The following example displays `"subPath"` set to an empty string. +La etiqueta HTML `base` con el atributo `href` especifica el URI base, o URL, para enlaces relativos. +Si estableces la opción `"localize"` en el archivo de configuración de compilación del espacio de trabajo [`angular.json`][GuideWorkspaceConfig] a `true` o a un array de IDs de configuración regional, el CLI ajusta el `href` base para cada versión de la aplicación. +Para ajustar el `href` base para cada versión de la aplicación, el CLI agrega la configuración regional al `"subPath"` configurado. +Especifica el `"subPath"` para cada configuración regional en tu archivo de configuración de compilación del espacio de trabajo [`angular.json`][GuideWorkspaceConfig]. +El siguiente ejemplo muestra `"subPath"` establecido como una cadena vacía. -## Configure a server +## Configurar un servidor -Typical deployment of multiple languages serve each language from a different subdirectory. -Users are redirected to the preferred language defined in the browser using the `Accept-Language` HTTP header. -If the user has not defined a preferred language, or if the preferred language is not available, then the server falls back to the default language. -To change the language, change your current location to another subdirectory. -The change of subdirectory often occurs using a menu implemented in the application. +El despliegue típico de múltiples idiomas sirve cada idioma desde un subdirectorio diferente. +Los usuarios son redirigidos al idioma preferido definido en el navegador usando el encabezado HTTP `Accept-Language`. +Si el usuario no ha definido un idioma preferido, o si el idioma preferido no está disponible, entonces el servidor recurre al idioma predeterminado. +Para cambiar el idioma, cambia tu ubicación actual a otro subdirectorio. +El cambio de subdirectorio a menudo ocurre usando un menú implementado en la aplicación. -For more information on how to deploy apps to a remote server, see [Deployment][GuideDeployment]. +Para más información sobre cómo desplegar aplicaciones a un servidor remoto, consulta [Despliegue][GuideDeployment]. -IMPORTANT: If you are using [Server rendering](guide/ssr) with `outputMode` set to `server`, Angular automatically handles redirection dynamically based on the `Accept-Language` HTTP header. This simplifies deployment by eliminating the need for manual server or configuration adjustments. +IMPORTANTE: Si estás usando [Renderizado del servidor](guide/ssr) con `outputMode` establecido en `server`, Angular maneja automáticamente la redirección dinámicamente basándose en el encabezado HTTP `Accept-Language`. Esto simplifica el despliegue al eliminar la necesidad de ajustes manuales del servidor o configuración. -### Nginx example +### Ejemplo de Nginx -The following example displays an Nginx configuration. +El siguiente ejemplo muestra una configuración de Nginx. -### Apache example +### Ejemplo de Apache -The following example displays an Apache configuration. +El siguiente ejemplo muestra una configuración de Apache. diff --git a/adev-es/src/content/guide/i18n/example.en.md b/adev-es/src/content/guide/i18n/example.en.md new file mode 100644 index 0000000..1825b49 --- /dev/null +++ b/adev-es/src/content/guide/i18n/example.en.md @@ -0,0 +1,18 @@ +# Example Angular Internationalization application + + + + + + + +## `fr-CA` and `en-US` example + +The following tabs display the example application and the associated translation files. + + + + + + + diff --git a/adev-es/src/content/guide/i18n/example.md b/adev-es/src/content/guide/i18n/example.md index 1825b49..280af65 100644 --- a/adev-es/src/content/guide/i18n/example.md +++ b/adev-es/src/content/guide/i18n/example.md @@ -1,4 +1,4 @@ -# Example Angular Internationalization application +# Aplicación de ejemplo de internacionalización de Angular @@ -6,9 +6,9 @@ -## `fr-CA` and `en-US` example +## Ejemplo de `fr-CA` y `en-US` -The following tabs display the example application and the associated translation files. +Las siguientes pestañas muestran la aplicación de ejemplo y los archivos de traducción asociados. diff --git a/adev-es/src/content/guide/i18n/format-data-locale.en.md b/adev-es/src/content/guide/i18n/format-data-locale.en.md new file mode 100644 index 0000000..016ae5c --- /dev/null +++ b/adev-es/src/content/guide/i18n/format-data-locale.en.md @@ -0,0 +1,52 @@ +# Format data based on locale + +Angular provides the following built-in data transformation [pipes](guide/templates/pipes). +The data transformation pipes use the [`LOCALE_ID`][ApiCoreLocaleId] token to format data based on rules of each locale. + +| Data transformation pipe | Details | +|:--- |:--- | +| [`DatePipe`][ApiCommonDatepipe] | Formats a date value. | +| [`CurrencyPipe`][ApiCommonCurrencypipe] | Transforms a number into a currency string. | +| [`DecimalPipe`][ApiCommonDecimalpipe] | Transforms a number into a decimal number string. | +| [`PercentPipe`][ApiCommonPercentpipe] | Transforms a number into a percentage string. | + +## Use DatePipe to display the current date + +To display the current date in the format for the current locale, use the following format for the `DatePipe`. + + + + + +{{ today | date }} + + + +## Override current locale for CurrencyPipe + +Add the `locale` parameter to the pipe to override the current value of `LOCALE_ID` token. + +To force the currency to use American English \(`en-US`\), use the following format for the `CurrencyPipe` + + + + + +{{ amount | currency : 'en-US' }} + + + +HELPFUL: The locale specified for the `CurrencyPipe` overrides the global `LOCALE_ID` token of your application. + +## What's next + + + + + +[ApiCommonCurrencypipe]: api/common/CurrencyPipe "CurrencyPipe | Common - API | Angular" + +[ApiCommonDatepipe]: api/common/DatePipe "DatePipe | Common - API | Angular" +[ApiCommonDecimalpipe]: api/common/DecimalPipe "DecimalPipe | Common - API | Angular" +[ApiCommonPercentpipe]: api/common/PercentPipe "PercentPipe | Common - API | Angular" +[ApiCoreLocaleId]: api/core/LOCALE_ID "LOCALE_ID | Core - API | Angular" diff --git a/adev-es/src/content/guide/i18n/format-data-locale.md b/adev-es/src/content/guide/i18n/format-data-locale.md index 016ae5c..b74d6f8 100644 --- a/adev-es/src/content/guide/i18n/format-data-locale.md +++ b/adev-es/src/content/guide/i18n/format-data-locale.md @@ -1,18 +1,18 @@ -# Format data based on locale +# Formatear datos según la configuración regional -Angular provides the following built-in data transformation [pipes](guide/templates/pipes). -The data transformation pipes use the [`LOCALE_ID`][ApiCoreLocaleId] token to format data based on rules of each locale. +Angular proporciona los siguientes [pipes](guide/templates/pipes) integrados de transformación de datos. +Los pipes de transformación de datos usan el token [`LOCALE_ID`][ApiCoreLocaleId] para formatear datos basándose en las reglas de cada configuración regional. -| Data transformation pipe | Details | +| Pipe de transformación de datos | Detalles | |:--- |:--- | -| [`DatePipe`][ApiCommonDatepipe] | Formats a date value. | -| [`CurrencyPipe`][ApiCommonCurrencypipe] | Transforms a number into a currency string. | -| [`DecimalPipe`][ApiCommonDecimalpipe] | Transforms a number into a decimal number string. | -| [`PercentPipe`][ApiCommonPercentpipe] | Transforms a number into a percentage string. | +| [`DatePipe`][ApiCommonDatepipe] | Formatea un valor de fecha. | +| [`CurrencyPipe`][ApiCommonCurrencypipe] | Transforma un número en una cadena de moneda. | +| [`DecimalPipe`][ApiCommonDecimalpipe] | Transforma un número en una cadena de número decimal. | +| [`PercentPipe`][ApiCommonPercentpipe] | Transforma un número en una cadena de porcentaje. | -## Use DatePipe to display the current date +## Usar DatePipe para mostrar la fecha actual -To display the current date in the format for the current locale, use the following format for the `DatePipe`. +Para mostrar la fecha actual en el formato de la configuración regional actual, usa el siguiente formato para el `DatePipe`. @@ -22,11 +22,11 @@ To display the current date in the format for the current locale, use the follow -## Override current locale for CurrencyPipe +## Sobrescribir la configuración regional actual para CurrencyPipe -Add the `locale` parameter to the pipe to override the current value of `LOCALE_ID` token. +Agrega el parámetro `locale` al pipe para sobrescribir el valor actual del token `LOCALE_ID`. -To force the currency to use American English \(`en-US`\), use the following format for the `CurrencyPipe` +Para forzar que la moneda use inglés americano \(`en-US`\), usa el siguiente formato para el `CurrencyPipe` @@ -36,12 +36,12 @@ To force the currency to use American English \(`en-US`\), use the following for -HELPFUL: The locale specified for the `CurrencyPipe` overrides the global `LOCALE_ID` token of your application. +ÚTIL: La configuración regional especificada para el `CurrencyPipe` sobrescribe el token `LOCALE_ID` global de tu aplicación. -## What's next +## Próximos pasos - + [ApiCommonCurrencypipe]: api/common/CurrencyPipe "CurrencyPipe | Common - API | Angular" diff --git a/adev-es/src/content/guide/i18n/import-global-variants.en.md b/adev-es/src/content/guide/i18n/import-global-variants.en.md new file mode 100644 index 0000000..e9ad9b2 --- /dev/null +++ b/adev-es/src/content/guide/i18n/import-global-variants.en.md @@ -0,0 +1,28 @@ +# Import global variants of the locale data + +The [Angular CLI][CliMain] automatically includes locale data if you run the [`ng build`][CliBuild] command with the `--localize` option. + + + + + +ng build --localize + + + +HELPFUL: The initial installation of Angular already contains locale data for English in the United States \(`en-US`\). +The [Angular CLI][CliMain] automatically includes the locale data and sets the `LOCALE_ID` value when you use the `--localize` option with [`ng build`][CliBuild] command. + +The `@angular/common` package on npm contains the locale data files. +Global variants of the locale data are available in `@angular/common/locales/global`. + +## `import` example for French + +For example, you could import the global variants for French \(`fr`\) in `main.ts` where you bootstrap the application. + + + +HELPFUL: In an `NgModules` application, you would import it in your `app.module`. + +[CliMain]: cli "CLI Overview and Command Reference | Angular" +[CliBuild]: cli/build "ng build | CLI | Angular" diff --git a/adev-es/src/content/guide/i18n/import-global-variants.md b/adev-es/src/content/guide/i18n/import-global-variants.md index e9ad9b2..0a99e21 100644 --- a/adev-es/src/content/guide/i18n/import-global-variants.md +++ b/adev-es/src/content/guide/i18n/import-global-variants.md @@ -1,6 +1,6 @@ -# Import global variants of the locale data +# Importar variantes globales de datos de configuración regional -The [Angular CLI][CliMain] automatically includes locale data if you run the [`ng build`][CliBuild] command with the `--localize` option. +El [CLI de Angular][CliMain] incluye automáticamente datos de configuración regional si ejecutas el comando [`ng build`][CliBuild] con la opción `--localize`. @@ -10,19 +10,19 @@ ng build --localize -HELPFUL: The initial installation of Angular already contains locale data for English in the United States \(`en-US`\). -The [Angular CLI][CliMain] automatically includes the locale data and sets the `LOCALE_ID` value when you use the `--localize` option with [`ng build`][CliBuild] command. +ÚTIL: La instalación inicial de Angular ya contiene datos de configuración regional para inglés en Estados Unidos \(`en-US`\). +El [CLI de Angular][CliMain] incluye automáticamente los datos de configuración regional y establece el valor de `LOCALE_ID` cuando usas la opción `--localize` con el comando [`ng build`][CliBuild]. -The `@angular/common` package on npm contains the locale data files. -Global variants of the locale data are available in `@angular/common/locales/global`. +El paquete `@angular/common` en npm contiene los archivos de datos de configuración regional. +Las variantes globales de los datos de configuración regional están disponibles en `@angular/common/locales/global`. -## `import` example for French +## Ejemplo de `import` para francés -For example, you could import the global variants for French \(`fr`\) in `main.ts` where you bootstrap the application. +Por ejemplo, podrías importar las variantes globales para francés \(`fr`\) en `main.ts` donde inicializas la aplicación. -HELPFUL: In an `NgModules` application, you would import it in your `app.module`. +ÚTIL: En una aplicación `NgModules`, lo importarías en tu `app.module`. [CliMain]: cli "CLI Overview and Command Reference | Angular" [CliBuild]: cli/build "ng build | CLI | Angular" diff --git a/adev-es/src/content/guide/i18n/locale-id.en.md b/adev-es/src/content/guide/i18n/locale-id.en.md new file mode 100644 index 0000000..949dd97 --- /dev/null +++ b/adev-es/src/content/guide/i18n/locale-id.en.md @@ -0,0 +1,77 @@ +# Refer to locales by ID + +Angular uses the Unicode *locale identifier* \(Unicode locale ID\) to find the correct locale data for internationalization of text strings. + + + +* A locale ID conforms to the [Unicode Common Locale Data Repository (CLDR) core specification][UnicodeCldrDevelopmentCoreSpecification]. + For more information about locale IDs, see [Unicode Language and Locale Identifiers][UnicodeCldrDevelopmentCoreSpecificationLocaleIDs]. + +* CLDR and Angular use [BCP 47 tags][RfcEditorInfoBcp47] as the base for the locale ID + + + +A locale ID specifies the language, country, and an optional code for further variants or subdivisions. +A locale ID consists of the language identifier, a hyphen \(`-`\) character, and the locale extension. + + +{language_id}-{locale_extension} + + +HELPFUL: To accurately translate your Angular project, you must decide which languages and locales you are targeting for internationalization. + +Many countries share the same language, but differ in usage. +The differences include grammar, punctuation, formats for currency, decimal numbers, dates, and so on. + +For the examples in this guide, use the following languages and locales. + +| Language | Locale | Unicode locale ID | +|:--- |:--- |:--- | +| English | Canada | `en-CA` | +| English | United States of America | `en-US` | +| French | Canada | `fr-CA` | +| French | France | `fr-FR` | + +The [Angular repository][GithubAngularAngularTreeMasterPackagesCommonLocales] includes common locales. + + +For a list of language codes, see [ISO 639-2](https://www.loc.gov/standards/iso639-2). + + +## Set the source locale ID + +Use the Angular CLI to set the source language in which you are writing the component template and code. + +By default, Angular uses `en-US` as the source locale of your project. + +To change the source locale of your project for the build, complete the following actions. + +1. Open the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file. +2. Add or modify the `sourceLocale` field inside the `i18n` section: +```json +{ + "projects": { + "your-project": { + "i18n": { + "sourceLocale": "ca" // Use your desired locale code + } + } + } +} +``` + +## What's next + + + + + +[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular" + +[GithubAngularAngularTreeMasterPackagesCommonLocales]: "angular/packages/common/locales | angular/angular | GitHub" + +[RfcEditorInfoBcp47]: https://www.rfc-editor.org/info/bcp47 "BCP 47 | RFC Editor" + +[UnicodeCldrDevelopmentCoreSpecification]: https://cldr.unicode.org/index/cldr-spec "Core Specification | Unicode CLDR Project" + +[UnicodeCldrDevelopmentCoreSpecificationLocaleID]: https://cldr.unicode.org/index/cldr-spec/picking-the-right-language-code "Unicode Language and Locale Identifiers - Core Specification | Unicode CLDR Project" diff --git a/adev-es/src/content/guide/i18n/locale-id.md b/adev-es/src/content/guide/i18n/locale-id.md index 949dd97..93752af 100644 --- a/adev-es/src/content/guide/i18n/locale-id.md +++ b/adev-es/src/content/guide/i18n/locale-id.md @@ -1,69 +1,69 @@ -# Refer to locales by ID +# Referirse a configuraciones regionales por ID -Angular uses the Unicode *locale identifier* \(Unicode locale ID\) to find the correct locale data for internationalization of text strings. +Angular usa el *identificador de configuración regional* Unicode \(Unicode locale ID\) para encontrar los datos de configuración regional correctos para la internacionalización de cadenas de texto. - + -* A locale ID conforms to the [Unicode Common Locale Data Repository (CLDR) core specification][UnicodeCldrDevelopmentCoreSpecification]. - For more information about locale IDs, see [Unicode Language and Locale Identifiers][UnicodeCldrDevelopmentCoreSpecificationLocaleIDs]. +* Un ID de configuración regional se ajusta a la [especificación central del Unicode Common Locale Data Repository (CLDR)][UnicodeCldrDevelopmentCoreSpecification]. + Para más información sobre los IDs de configuración regional, consulta [Identificadores de Idioma y Configuración Regional Unicode][UnicodeCldrDevelopmentCoreSpecificationLocaleIDs]. -* CLDR and Angular use [BCP 47 tags][RfcEditorInfoBcp47] as the base for the locale ID +* CLDR y Angular usan [etiquetas BCP 47][RfcEditorInfoBcp47] como base para el ID de configuración regional -A locale ID specifies the language, country, and an optional code for further variants or subdivisions. -A locale ID consists of the language identifier, a hyphen \(`-`\) character, and the locale extension. +Un ID de configuración regional especifica el idioma, país y un código opcional para variantes o subdivisiones adicionales. +Un ID de configuración regional consiste en el identificador de idioma, un carácter guión \(`-`\) y la extensión de configuración regional. {language_id}-{locale_extension} -HELPFUL: To accurately translate your Angular project, you must decide which languages and locales you are targeting for internationalization. +ÚTIL: Para traducir con precisión tu proyecto Angular, debes decidir qué idiomas y configuraciones regionales vas a usar para la internacionalización. -Many countries share the same language, but differ in usage. -The differences include grammar, punctuation, formats for currency, decimal numbers, dates, and so on. +Muchos países comparten el mismo idioma, pero difieren en el uso. +Las diferencias incluyen gramática, puntuación, formatos de moneda, números decimales, fechas, etc. -For the examples in this guide, use the following languages and locales. +Para los ejemplos en esta guía, usa los siguientes idiomas y configuraciones regionales. -| Language | Locale | Unicode locale ID | +| Idioma | Configuración regional | ID de configuración regional Unicode | |:--- |:--- |:--- | -| English | Canada | `en-CA` | -| English | United States of America | `en-US` | -| French | Canada | `fr-CA` | -| French | France | `fr-FR` | +| Inglés | Canadá | `en-CA` | +| Inglés | Estados Unidos de América| `en-US` | +| Francés | Canadá | `fr-CA` | +| Francés | Francia | `fr-FR` | -The [Angular repository][GithubAngularAngularTreeMasterPackagesCommonLocales] includes common locales. +El [repositorio de Angular][GithubAngularAngularTreeMasterPackagesCommonLocales] incluye configuraciones regionales comunes. -For a list of language codes, see [ISO 639-2](https://www.loc.gov/standards/iso639-2). +Para una lista de códigos de idioma, consulta [ISO 639-2](https://www.loc.gov/standards/iso639-2). -## Set the source locale ID +## Establecer el ID de configuración regional de origen -Use the Angular CLI to set the source language in which you are writing the component template and code. +Usa el CLI de Angular para establecer el idioma de origen en el que estás escribiendo en la plantilla del componente y el código. -By default, Angular uses `en-US` as the source locale of your project. +Por defecto, Angular usa `en-US` como la configuración regional de origen de tu proyecto. -To change the source locale of your project for the build, complete the following actions. +Para cambiar la configuración regional de origen de tu proyecto para la compilación, completa las siguientes acciones. -1. Open the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file. -2. Add or modify the `sourceLocale` field inside the `i18n` section: +1. Abre el archivo de configuración de compilación del espacio de trabajo [`angular.json`][GuideWorkspaceConfig]. +2. Agrega o modifica el campo `sourceLocale` dentro de la sección `i18n`: ```json { "projects": { "your-project": { "i18n": { - "sourceLocale": "ca" // Use your desired locale code + "sourceLocale": "ca" // Usa el código de configuración regional deseado } } } } ``` -## What's next +## Próximos pasos - + [GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular" diff --git a/adev-es/src/content/guide/i18n/manage-marked-text.en.md b/adev-es/src/content/guide/i18n/manage-marked-text.en.md new file mode 100644 index 0000000..69a1104 --- /dev/null +++ b/adev-es/src/content/guide/i18n/manage-marked-text.en.md @@ -0,0 +1,98 @@ +# Manage marked text with custom IDs + +The Angular extractor generates a file with a translation unit entry each of the following instances. + +* Each `i18n` attribute in a component template +* Each [`$localize`][ApiLocalizeInitLocalize] tagged message string in component code + +As described in [How meanings control text extraction and merges][GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges], Angular assigns each translation unit a unique ID. + +The following example displays translation units with unique IDs. + + + +When you change the translatable text, the extractor generates a new ID for that translation unit. +In most cases, changes in the source text also require a change to the translation. +Therefore, using a new ID keeps the text change in sync with translations. + +However, some translation systems require a specific form or syntax for the ID. +To address the requirement, use a custom ID to mark text. +Most developers don't need to use a custom ID. +If you want to use a unique syntax to convey additional metadata, use a custom ID. +Additional metadata may include the library, component, or area of the application in which the text appears. + +To specify a custom ID in the `i18n` attribute or [`$localize`][ApiLocalizeInitLocalize] tagged message string, use the `@@` prefix. +The following example defines the `introductionHeader` custom ID in a heading element. + + + +The following example defines the `introductionHeader` custom ID for a variable. + + + + + +variableText1 = $localize`:@@introductionHeader:Hello i18n!`; + + + +When you specify a custom ID, the extractor generates a translation unit with the custom ID. + + + +If you change the text, the extractor does not change the ID. +As a result, you don't have to take the extra step to update the translation. +The drawback of using custom IDs is that if you change the text, your translation may be out-of-sync with the newly changed source text. + +## Use a custom ID with a description + +Use a custom ID in combination with a description and a meaning to further help the translator. + +The following example includes a description, followed by the custom ID. + + + +The following example defines the `introductionHeader` custom ID and description for a variable. + + + + + +variableText2 = $localize`:An introduction header for this sample@@introductionHeader:Hello i18n!`; + + + +The following example adds a meaning. + + + +The following example defines the `introductionHeader` custom ID for a variable. + + + + + +variableText3 = $localize`:site header|An introduction header for this sample@@introductionHeader:Hello i18n!`; + + + +### Define unique custom IDs + +Be sure to define custom IDs that are unique. +If you use the same ID for two different text elements, the extraction tool extracts only the first one, and Angular uses the translation in place of both original text elements. + +For example, in the following code snippet the same `myId` custom ID is defined for two different text elements. + + + +The following displays the translation in French. + + + +Both elements now use the same translation \(`Bonjour`\), because both were defined with the same custom ID. + + + +[ApiLocalizeInitLocalize]: api/localize/init/$localize "$localize | init - localize - API | Angular" + +[GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges]: guide/i18n/prepare#h1-example "How meanings control text extraction and merges - Prepare components for translations | Angular" diff --git a/adev-es/src/content/guide/i18n/manage-marked-text.md b/adev-es/src/content/guide/i18n/manage-marked-text.md index 69a1104..fbf98f7 100644 --- a/adev-es/src/content/guide/i18n/manage-marked-text.md +++ b/adev-es/src/content/guide/i18n/manage-marked-text.md @@ -1,32 +1,32 @@ -# Manage marked text with custom IDs +# Gestionar texto marcado con IDs personalizados -The Angular extractor generates a file with a translation unit entry each of the following instances. +El extractor de Angular genera un archivo con una entrada de unidad de traducción en cada uno de los siguientes casos. -* Each `i18n` attribute in a component template -* Each [`$localize`][ApiLocalizeInitLocalize] tagged message string in component code +* Cada atributo `i18n` en una plantilla de componente +* Cada cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize] en el código del componente -As described in [How meanings control text extraction and merges][GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges], Angular assigns each translation unit a unique ID. +Como se describe en [Cómo los significados controlan la extracción y la fusión de texto][GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges], Angular asigna a cada unidad de traducción un ID único. -The following example displays translation units with unique IDs. +El siguiente ejemplo muestra unidades de traducción con IDs únicos. -When you change the translatable text, the extractor generates a new ID for that translation unit. -In most cases, changes in the source text also require a change to the translation. -Therefore, using a new ID keeps the text change in sync with translations. +Cuando cambias el texto traducible, el extractor genera un nuevo ID para esa unidad de traducción. +En la mayoría de los casos, los cambios en el texto fuente también requieren un cambio en la traducción. +Por lo tanto, usar un nuevo ID mantiene el cambio de texto sincronizado con las traducciones. -However, some translation systems require a specific form or syntax for the ID. -To address the requirement, use a custom ID to mark text. -Most developers don't need to use a custom ID. -If you want to use a unique syntax to convey additional metadata, use a custom ID. -Additional metadata may include the library, component, or area of the application in which the text appears. +Sin embargo, algunos sistemas de traducción requieren una forma o sintaxis específica para el ID. +Para cumplir con este requisito, usa un ID personalizado para marcar texto. +La mayoría de los desarrolladores no necesitan usar un ID personalizado. +Si deseas usar una sintaxis única para transmitir metadatos adicionales, usa un ID personalizado. +Los metadatos adicionales pueden incluir la biblioteca, el componente o el área de la aplicación en la que aparece el texto. -To specify a custom ID in the `i18n` attribute or [`$localize`][ApiLocalizeInitLocalize] tagged message string, use the `@@` prefix. -The following example defines the `introductionHeader` custom ID in a heading element. +Para especificar un ID personalizado en el atributo `i18n` o en la cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize], usa el prefijo `@@`. +El siguiente ejemplo define el ID personalizado `introductionHeader` en un elemento de encabezado. -The following example defines the `introductionHeader` custom ID for a variable. +El siguiente ejemplo define el ID personalizado `introductionHeader` para una variable. @@ -36,23 +36,23 @@ variableText1 = $localize`:@@introductionHeader:Hello i18n!`; -When you specify a custom ID, the extractor generates a translation unit with the custom ID. +Cuando especificas un ID personalizado, el extractor genera una unidad de traducción con el ID personalizado. -If you change the text, the extractor does not change the ID. -As a result, you don't have to take the extra step to update the translation. -The drawback of using custom IDs is that if you change the text, your translation may be out-of-sync with the newly changed source text. +Si cambias el texto, el extractor no cambia el ID. +Como resultado, no tienes que dar el paso adicional de actualizar la traducción. +La desventaja de usar IDs personalizados es que si cambias el texto, tu traducción puede quedar desincronizada con el texto fuente recién cambiado. -## Use a custom ID with a description +## Usar un ID personalizado con una descripción -Use a custom ID in combination with a description and a meaning to further help the translator. +Usa un ID personalizado en combinación con una descripción y un significado para ayudar aún más al traductor. -The following example includes a description, followed by the custom ID. +El siguiente ejemplo incluye una descripción, seguida del ID personalizado. -The following example defines the `introductionHeader` custom ID and description for a variable. +El siguiente ejemplo define el ID personalizado `introductionHeader` y una descripción para una variable. @@ -62,11 +62,11 @@ variableText2 = $localize`:An introduction header for this sample@@introductionH -The following example adds a meaning. +El siguiente ejemplo agrega un significado. -The following example defines the `introductionHeader` custom ID for a variable. +El siguiente ejemplo define el ID personalizado `introductionHeader` para una variable. @@ -76,20 +76,20 @@ variableText3 = $localize`:site header|An introduction header for this sample@@i -### Define unique custom IDs +### Definir IDs personalizados únicos -Be sure to define custom IDs that are unique. -If you use the same ID for two different text elements, the extraction tool extracts only the first one, and Angular uses the translation in place of both original text elements. +Asegúrate de definir IDs personalizados que sean únicos. +Si usas el mismo ID para dos elementos de texto diferentes, la herramienta de extracción extrae solo el primero y Angular usa la misma traducción en lugar de ambos elementos de texto originales. -For example, in the following code snippet the same `myId` custom ID is defined for two different text elements. +Por ejemplo, en el siguiente fragmento de código se define el mismo ID personalizado `myId` para dos elementos de texto diferentes. -The following displays the translation in French. +Lo siguiente muestra la traducción en francés. -Both elements now use the same translation \(`Bonjour`\), because both were defined with the same custom ID. +Ambos elementos ahora usan la misma traducción \(`Bonjour`\), porque ambos fueron definidos con el mismo ID personalizado. diff --git a/adev-es/src/content/guide/i18n/merge.en.md b/adev-es/src/content/guide/i18n/merge.en.md new file mode 100644 index 0000000..55a58eb --- /dev/null +++ b/adev-es/src/content/guide/i18n/merge.en.md @@ -0,0 +1,156 @@ +# Merge translations into the application + +To merge the completed translations into your project, complete the following actions + +1. Use the [Angular CLI][CliMain] to build a copy of the distributable files of your project +1. Use the `"localize"` option to replace all of the i18n messages with the valid translations and build a localized variant application. + A variant application is a complete copy of the distributable files of your application translated for a single locale. + +After you merge the translations, serve each distributable copy of the application using server-side language detection or different subdirectories. + +HELPFUL: For more information about how to serve each distributable copy of the application, see [deploying multiple locales](guide/i18n/deploy). + +For a compile-time translation of the application, the build process uses ahead-of-time (AOT) compilation to produce a small, fast, ready-to-run application. + +HELPFUL: For a detailed explanation of the build process, see [Building and serving Angular apps][GuideBuild]. +The build process works for translation files in the `.xlf` format or in another format that Angular understands, such as `.xtb`. +For more information about translation file formats used by Angular, see [Change the source language file format][GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat] + +To build a separate distributable copy of the application for each locale, [define the locales in the build configuration][GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration] in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file of your project. + +This method shortens the build process by removing the requirement to perform a full application build for each locale. + +To [generate application variants for each locale][GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale], use the `"localize"` option in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file. +Also, to [build from the command line][GuideI18nCommonMergeBuildFromTheCommandLine], use the [`build`][CliBuild] [Angular CLI][CliMain] command with the `--localize` option. + +HELPFUL: Optionally, [apply specific build options for just one locale][GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale] for a custom locale configuration. + +## Define locales in the build configuration + +Use the `i18n` project option in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file of your project to define locales for a project. + +The following sub-options identify the source language and tell the compiler where to find supported translations for the project. + +| Suboption | Details | +|:--- |:--- | +| `sourceLocale` | The locale you use within the application source code \(`en-US` by default\) | +| `locales` | A map of locale identifiers to translation files | + +### `angular.json` for `en-US` and `fr` example + +For example, the following excerpt of an [`angular.json`][GuideWorkspaceConfig] workspace build configuration file sets the source locale to `en-US` and provides the path to the French \(`fr`\) locale translation file. + + + +## Generate application variants for each locale + +To use your locale definition in the build configuration, use the `"localize"` option in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file to tell the CLI which locales to generate for the build configuration. + +* Set `"localize"` to `true` for all the locales previously defined in the build configuration. +* Set `"localize"` to an array of a subset of the previously defined locale identifiers to build only those locale versions. +* Set `"localize"` to `false` to disable localization and not generate any locale-specific versions. + +HELPFUL: Ahead-of-time (AOT) compilation is required to localize component templates. + +If you changed this setting, set `"aot"` to `true` in order to use AOT. + +HELPFUL: Due to the deployment complexities of i18n and the need to minimize rebuild time, the development server only supports localizing a single locale at a time. +If you set the `"localize"` option to `true`, define more than one locale, and use `ng serve`; then an error occurs. +If you want to develop against a specific locale, set the `"localize"` option to a specific locale. +For example, for French \(`fr`\), specify `"localize": ["fr"]`. + +The CLI loads and registers the locale data, places each generated version in a locale-specific directory to keep it separate from other locale versions, and puts the directories within the configured `outputPath` for the project. +For each application variant the `lang` attribute of the `html` element is set to the locale. +The CLI also adjusts the HTML base HREF for each version of the application by adding the locale to the configured `baseHref`. + +Set the `"localize"` property as a shared configuration to effectively inherit for all the configurations. +Also, set the property to override other configurations. + +### `angular.json` include all locales from build example + +The following example displays the `"localize"` option set to `true` in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file, so that all locales defined in the build configuration are built. + + + +## Build from the command line + +Also, use the `--localize` option with the [`ng build`][CliBuild] command and your existing `production` configuration. +The CLI builds all locales defined in the build configuration. +If you set the locales in build configuration, it is similar to when you set the `"localize"` option to `true`. + +HELPFUL: For more information about how to set the locales, see [Generate application variants for each locale][GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]. + + + +## Apply specific build options for just one locale + +To apply specific build options to only one locale, specify a single locale to create a custom locale-specific configuration. + +IMPORTANT: Use the [Angular CLI][CliMain] development server \(`ng serve`\) with only a single locale. + +### build for French example + +The following example displays a custom locale-specific configuration using a single locale. + + + +Pass this configuration to the `ng serve` or `ng build` commands. +The following code example displays how to serve the French language file. + + + +For production builds, use configuration composition to run both configurations. + + + + + +## Report missing translations + +When a translation is missing, the build succeeds but generates a warning such as `Missing translation for message "{translation_text}"`. +To configure the level of warning that is generated by the Angular compiler, specify one of the following levels. + +| Warning level | Details | Output | +|:--- |:--- |:--- | +| `error` | Throw an error and the build fails | n/a | +| `ignore` | Do nothing | n/a | +| `warning` | Displays the default warning in the console or shell | `Missing translation for message "{translation_text}"` | + +Specify the warning level in the `options` section for the `build` target of your [`angular.json`][GuideWorkspaceConfig] workspace build configuration file. + +### `angular.json` `error` warning example + +The following example displays how to set the warning level to `error`. + + + +HELPFUL: When you compile your Angular project into an Angular application, the instances of the `i18n` attribute are replaced with instances of the [`$localize`][ApiLocalizeInitLocalize] tagged message string. +This means that your Angular application is translated after compilation. +This also means that you can create localized versions of your Angular application without re-compiling your entire Angular project for each locale. + +When you translate your Angular application, the *translation transformation* replaces and reorders the parts \(static strings and expressions\) of the template literal string with strings from a collection of translations. +For more information, see [`$localize`][ApiLocalizeInitLocalize]. + +TLDR: Compile once, then translate for each locale. + +## What's next + + + + + +[ApiLocalizeInitLocalize]: api/localize/init/$localize "$localize | init - localize - API | Angular" + +[CliMain]: cli "CLI Overview and Command Reference | Angular" +[CliBuild]: cli/build "ng build | CLI | Angular" + +[GuideBuild]: tools/cli/build "Building and serving Angular apps | Angular" + +[GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale]: guide/i18n/merge#apply-specific-build-options-for-just-one-locale "Apply specific build options for just one locale - Merge translations into the application | Angular" +[GuideI18nCommonMergeBuildFromTheCommandLine]: guide/i18n/merge#build-from-the-command-line "Build from the command line - Merge translations into the application | Angular" +[GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration]: guide/i18n/merge#define-locales-in-the-build-configuration "Define locales in the build configuration - Merge translations into the application | Angular" +[GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]: guide/i18n/merge#generate-application-variants-for-each-locale "Generate application variants for each locale - Merge translations into the application | Angular" + +[GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat]: guide/i18n/translation-files#change-the-source-language-file-format "Change the source language file format - Work with translation files | Angular" + +[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular" diff --git a/adev-es/src/content/guide/i18n/merge.md b/adev-es/src/content/guide/i18n/merge.md index 55a58eb..276e500 100644 --- a/adev-es/src/content/guide/i18n/merge.md +++ b/adev-es/src/content/guide/i18n/merge.md @@ -1,142 +1,142 @@ -# Merge translations into the application +# Fusionar traducciones en la aplicación -To merge the completed translations into your project, complete the following actions +Para fusionar las traducciones completas en tu proyecto, realiza las siguientes acciones -1. Use the [Angular CLI][CliMain] to build a copy of the distributable files of your project -1. Use the `"localize"` option to replace all of the i18n messages with the valid translations and build a localized variant application. - A variant application is a complete copy of the distributable files of your application translated for a single locale. +1. Usa el [CLI de Angular][CliMain] para compilar una copia de los archivos distribuibles de tu proyecto +1. Usa la opción `"localize"` para reemplazar todos los mensajes i18n con las traducciones válidas y compilar una variante localizada de la aplicación. + Una aplicación variante es una copia completa de los archivos distribuibles de tu aplicación traducida para una sola configuración regional. -After you merge the translations, serve each distributable copy of the application using server-side language detection or different subdirectories. +Después de fusionar las traducciones, sirve cada copia distribuible de la aplicación usando detección de idioma del lado del servidor o subdirectorios diferentes. -HELPFUL: For more information about how to serve each distributable copy of the application, see [deploying multiple locales](guide/i18n/deploy). +ÚTIL: Para más información sobre cómo servir cada copia distribuible de la aplicación, consulta [desplegar múltiples configuraciones regionales](guide/i18n/deploy). -For a compile-time translation of the application, the build process uses ahead-of-time (AOT) compilation to produce a small, fast, ready-to-run application. +Para una traducción en tiempo de compilación de la aplicación, el proceso de compilación usa compilación por adelantado (AOT) para producir una aplicación pequeña, rápida y lista para ejecutarse. -HELPFUL: For a detailed explanation of the build process, see [Building and serving Angular apps][GuideBuild]. -The build process works for translation files in the `.xlf` format or in another format that Angular understands, such as `.xtb`. -For more information about translation file formats used by Angular, see [Change the source language file format][GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat] +ÚTIL: Para una explicación detallada del proceso de compilación, consulta [Compilar y servir aplicaciones Angular][GuideBuild]. +El proceso de compilación funciona con archivos de traducción en formato `.xlf` o en otro formato que Angular entienda, como `.xtb`. +Para más información sobre formatos de archivos de traducción usados por Angular, consulta [Cambiar el formato del archivo del idioma fuente][GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat] -To build a separate distributable copy of the application for each locale, [define the locales in the build configuration][GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration] in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file of your project. +Para compilar una copia distribuible separada de la aplicación para cada configuración regional, [define las configuraciones regionales en la configuración de compilación][GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration] en el archivo [`angular.json`][GuideWorkspaceConfig] de configuración de compilación del espacio de trabajo de tu proyecto. -This method shortens the build process by removing the requirement to perform a full application build for each locale. +Este método acorta el proceso de compilación al eliminar el requisito de realizar una compilación completa de la aplicación para cada configuración regional. -To [generate application variants for each locale][GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale], use the `"localize"` option in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file. -Also, to [build from the command line][GuideI18nCommonMergeBuildFromTheCommandLine], use the [`build`][CliBuild] [Angular CLI][CliMain] command with the `--localize` option. +Para [generar variantes de la aplicación para cada configuración regional][GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale], usa la opción `"localize"` en el archivo [`angular.json`][GuideWorkspaceConfig] de configuración de compilación. +Además, para [compilar desde la línea de comandos][GuideI18nCommonMergeBuildFromTheCommandLine], usa el comando [`build`][CliBuild] del [CLI de Angular][CliMain] con la opción `--localize`. -HELPFUL: Optionally, [apply specific build options for just one locale][GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale] for a custom locale configuration. +ÚTIL: Opcionalmente, [aplica opciones de compilación específicas para solo una configuración regional][GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale] para una configuración personalizada. -## Define locales in the build configuration +## Definir configuraciones regionales en la configuración de compilación -Use the `i18n` project option in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file of your project to define locales for a project. +Usa la opción de proyecto `i18n` en el archivo [`angular.json`][GuideWorkspaceConfig] de configuración de compilación del espacio de trabajo de tu proyecto para definir configuraciones regionales para un proyecto. -The following sub-options identify the source language and tell the compiler where to find supported translations for the project. +Las siguientes subopciones identifican el idioma fuente e indican al compilador dónde encontrar traducciones compatibles para el proyecto. -| Suboption | Details | +| Subopción | Detalles | |:--- |:--- | -| `sourceLocale` | The locale you use within the application source code \(`en-US` by default\) | -| `locales` | A map of locale identifiers to translation files | +| `sourceLocale` | La configuración regional que usas dentro del código fuente de la aplicación \(`en-US` por defecto\) | +| `locales` | Un mapa de identificadores de configuración regional a archivos de traducción | -### `angular.json` for `en-US` and `fr` example +### Ejemplo de `angular.json` para `en-US` y `fr` -For example, the following excerpt of an [`angular.json`][GuideWorkspaceConfig] workspace build configuration file sets the source locale to `en-US` and provides the path to the French \(`fr`\) locale translation file. +Por ejemplo, el siguiente extracto de un archivo [`angular.json`][GuideWorkspaceConfig] de configuración de compilación del espacio de trabajo establece la configuración regional de origen en `en-US` y proporciona la ruta al archivo de traducción de la configuración regional francesa \(`fr`\). -## Generate application variants for each locale +## Generar variantes de la aplicación para cada configuración regional -To use your locale definition in the build configuration, use the `"localize"` option in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file to tell the CLI which locales to generate for the build configuration. +Para usar tu definición de configuraciones regionales en la configuración de compilación, usa la opción `"localize"` en el archivo [`angular.json`][GuideWorkspaceConfig] para indicar al CLI qué configuraciones regionales generar para la compilación. -* Set `"localize"` to `true` for all the locales previously defined in the build configuration. -* Set `"localize"` to an array of a subset of the previously defined locale identifiers to build only those locale versions. -* Set `"localize"` to `false` to disable localization and not generate any locale-specific versions. +* Establece `"localize"` en `true` para todas las configuraciones regionales definidas previamente en la configuración de compilación. +* Establece `"localize"` en un array con un subconjunto de los identificadores de configuración regional definidos previamente para compilar solo esas versiones. +* Establece `"localize"` en `false` para deshabilitar la localización y no generar versiones específicas por configuración regional. -HELPFUL: Ahead-of-time (AOT) compilation is required to localize component templates. +ÚTIL: Se requiere compilación por adelantado (AOT) para localizar las plantillas de componentes. -If you changed this setting, set `"aot"` to `true` in order to use AOT. +Si cambiaste esta configuración, establece `"aot"` en `true` para usar AOT. -HELPFUL: Due to the deployment complexities of i18n and the need to minimize rebuild time, the development server only supports localizing a single locale at a time. -If you set the `"localize"` option to `true`, define more than one locale, and use `ng serve`; then an error occurs. -If you want to develop against a specific locale, set the `"localize"` option to a specific locale. -For example, for French \(`fr`\), specify `"localize": ["fr"]`. +ÚTIL: Debido a las complejidades de despliegue de i18n y la necesidad de minimizar el tiempo de reconstrucción, el servidor de desarrollo solo admite localizar una sola configuración regional a la vez. +Si configuras la opción `"localize"` en `true`, defines más de una configuración regional y usas `ng serve`, se producirá un error. +Si deseas desarrollar con una configuración regional específica, establece la opción `"localize"` a una configuración regional específica. +Por ejemplo, para francés \(`fr`\), especifica `"localize": ["fr"]`. -The CLI loads and registers the locale data, places each generated version in a locale-specific directory to keep it separate from other locale versions, and puts the directories within the configured `outputPath` for the project. -For each application variant the `lang` attribute of the `html` element is set to the locale. -The CLI also adjusts the HTML base HREF for each version of the application by adding the locale to the configured `baseHref`. +El CLI carga y registra los datos de configuración regional, coloca cada versión generada en un directorio específico de configuración regional para mantenerla separada de otras versiones y ubica los directorios dentro del `outputPath` configurado para el proyecto. +Para cada variante de aplicación, el atributo `lang` del elemento `html` se establece en la configuración regional. +El CLI también ajusta el HREF base de HTML para cada versión de la aplicación agregando la configuración regional al `baseHref` configurado. -Set the `"localize"` property as a shared configuration to effectively inherit for all the configurations. -Also, set the property to override other configurations. +Establece la propiedad `"localize"` como una configuración compartida para heredarla efectivamente en todas las configuraciones. +Además, establece la propiedad para anular otras configuraciones. -### `angular.json` include all locales from build example +### Ejemplo de `angular.json` que incluye todas las configuraciones regionales de la compilación -The following example displays the `"localize"` option set to `true` in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file, so that all locales defined in the build configuration are built. +El siguiente ejemplo muestra la opción `"localize"` establecida en `true` en el archivo [`angular.json`][GuideWorkspaceConfig] de configuración de compilación del espacio de trabajo, de modo que se compilen todas las configuraciones regionales definidas en la configuración de compilación. -## Build from the command line +## Compilar desde la línea de comandos -Also, use the `--localize` option with the [`ng build`][CliBuild] command and your existing `production` configuration. -The CLI builds all locales defined in the build configuration. -If you set the locales in build configuration, it is similar to when you set the `"localize"` option to `true`. +Además, usa la opción `--localize` con el comando [`ng build`][CliBuild] y tu configuración `production` existente. +El CLI compila todas las configuraciones regionales definidas en la configuración de compilación. +Si estableces las configuraciones regionales en la configuración de compilación, es similar a cuando estableces la opción `"localize"` en `true`. -HELPFUL: For more information about how to set the locales, see [Generate application variants for each locale][GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]. +ÚTIL: Para más información sobre cómo establecer las configuraciones regionales, consulta [Generar variantes de la aplicación para cada configuración regional][GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]. -## Apply specific build options for just one locale +## Aplicar opciones específicas de compilación para solo una configuración regional -To apply specific build options to only one locale, specify a single locale to create a custom locale-specific configuration. +Para aplicar opciones específicas de compilación a solo una configuración regional, especifica una sola configuración regional para crear una configuración personalizada específica. -IMPORTANT: Use the [Angular CLI][CliMain] development server \(`ng serve`\) with only a single locale. +IMPORTANTE: Usa el servidor de desarrollo del [CLI de Angular][CliMain] \(`ng serve`\) con una sola configuración regional. -### build for French example +### Ejemplo de compilación para francés -The following example displays a custom locale-specific configuration using a single locale. +El siguiente ejemplo muestra una configuración personalizada específica para una sola configuración regional. -Pass this configuration to the `ng serve` or `ng build` commands. -The following code example displays how to serve the French language file. +Pasa esta configuración a los comandos `ng serve` o `ng build`. +El siguiente ejemplo de código muestra cómo servir el archivo de idioma francés. -For production builds, use configuration composition to run both configurations. +Para compilaciones de producción, usa composición de configuraciones para ejecutar ambas configuraciones. -## Report missing translations +## Reportar traducciones faltantes -When a translation is missing, the build succeeds but generates a warning such as `Missing translation for message "{translation_text}"`. -To configure the level of warning that is generated by the Angular compiler, specify one of the following levels. +Cuando falta una traducción, la compilación tiene éxito pero genera una advertencia como `Missing translation for message "{translation_text}"`. +Para configurar el nivel de advertencia que genera el compilador de Angular, especifica uno de los siguientes niveles. -| Warning level | Details | Output | +| Nivel de advertencia | Detalles | Salida | |:--- |:--- |:--- | -| `error` | Throw an error and the build fails | n/a | -| `ignore` | Do nothing | n/a | -| `warning` | Displays the default warning in the console or shell | `Missing translation for message "{translation_text}"` | +| `error` | Lanza un error y la compilación falla | n/a | +| `ignore` | No hace nada | n/a | +| `warning` | Muestra la advertencia predeterminada en la consola o shell | `Missing translation for message "{translation_text}"` | -Specify the warning level in the `options` section for the `build` target of your [`angular.json`][GuideWorkspaceConfig] workspace build configuration file. +Especifica el nivel de advertencia en la sección `options` para el objetivo `build` de tu archivo [`angular.json`][GuideWorkspaceConfig] de configuración de compilación del espacio de trabajo. -### `angular.json` `error` warning example +### Ejemplo de advertencia `error` en `angular.json` -The following example displays how to set the warning level to `error`. +El siguiente ejemplo muestra cómo establecer el nivel de advertencia en `error`. -HELPFUL: When you compile your Angular project into an Angular application, the instances of the `i18n` attribute are replaced with instances of the [`$localize`][ApiLocalizeInitLocalize] tagged message string. -This means that your Angular application is translated after compilation. -This also means that you can create localized versions of your Angular application without re-compiling your entire Angular project for each locale. +ÚTIL: Cuando compilas tu proyecto Angular en una aplicación Angular, las instancias del atributo `i18n` se reemplazan con instancias de la cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize]. +Esto significa que tu aplicación Angular se traduce después de la compilación. +Esto también significa que puedes crear versiones localizadas de tu aplicación Angular sin recompilar todo tu proyecto Angular para cada configuración regional. -When you translate your Angular application, the *translation transformation* replaces and reorders the parts \(static strings and expressions\) of the template literal string with strings from a collection of translations. -For more information, see [`$localize`][ApiLocalizeInitLocalize]. +Cuando traduces tu aplicación Angular, la *transformación de traducción* reemplaza y reordena las partes \(cadenas estáticas y expresiones\) de la cadena literal de plantilla con cadenas de una colección de traducciones. +Para más información, consulta [`$localize`][ApiLocalizeInitLocalize]. -TLDR: Compile once, then translate for each locale. +TL;DR: Compila una vez, luego traduce para cada configuración regional. -## What's next +## Próximos pasos - + [ApiLocalizeInitLocalize]: api/localize/init/$localize "$localize | init - localize - API | Angular" diff --git a/adev-es/src/content/guide/i18n/overview.en.md b/adev-es/src/content/guide/i18n/overview.en.md new file mode 100644 index 0000000..0ad4076 --- /dev/null +++ b/adev-es/src/content/guide/i18n/overview.en.md @@ -0,0 +1,54 @@ +# Angular Internationalization + +*Internationalization*, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales around the world. +*Localization* is the process of building versions of your project for different locales. +The localization process includes the following actions. + +* Extract text for translation into different languages +* Format data for a specific locale + +A *locale* identifies a region in which people speak a particular language or language variant. +Possible regions include countries and geographical regions. +A locale determines the formatting and parsing of the following details. + +* Measurement units including date and time, numbers, and currencies +* Translated names including time zones, languages, and countries + +For a quick introduction to localization and internationalization watch this video: + + + +## Learn about Angular internationalization + + + + Learn how to add the Angular Localize package to your project + + + Learn how to identify and specify a locale identifier for your project + + + Learn how to implement localized data pipes and override the locale for your project + + + Learn how to specify source text for translation + + + Learn how to review and process translation text + + + Learn how to merge translations and build your translated application + + + Learn how to deploy multiple locales for your application + + + Learn how to import locale data for language variants + + + Learn how to implement custom IDs to help you manage your marked text + + + Review an example of Angular internationalization. + + diff --git a/adev-es/src/content/guide/i18n/overview.md b/adev-es/src/content/guide/i18n/overview.md index d504e1a..1c03e85 100644 --- a/adev-es/src/content/guide/i18n/overview.md +++ b/adev-es/src/content/guide/i18n/overview.md @@ -1,54 +1,54 @@ -# Angular Internationalization (i18n) +# Internacionalización de Angular (i18n) -*Internationalization*, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales around the world. -*Localization* is the process of building versions of your project for different locales. -The localization process includes the following actions. +La *internacionalización*, a veces referenciada como i18n, es el proceso de diseñar y preparar tu proyecto para su uso en diferentes configuraciones regionales (locales) alrededor del mundo. +La *localización* es el proceso de construir versiones de tu proyecto para diferentes configuraciones regionales. +El proceso de localización incluye las siguientes acciones. -* Extract text for translation into different languages -* Format data for a specific locale +* Extraer texto para traducción a diferentes idiomas +* Formatear datos para una configuración regional específica -A *locale* identifies a region in which people speak a particular language or language variant. -Possible regions include countries and geographical regions. -A locale determines the formatting and parsing of the following details. +Una *configuración regional* (locale) identifica una región en la que las personas hablan un idioma particular o variante del idioma. +Las posibles regiones incluyen países y regiones geográficas. +Una configuración regional determina el formato y análisis de los siguientes detalles. -* Measurement units including date and time, numbers, and currencies -* Translated names including time zones, languages, and countries +* Unidades de medida incluyendo fecha y hora, números y monedas +* Nombres traducidos incluyendo zonas horarias, idiomas y países -For a quick introduction to localization and internationalization watch this video: +Para una introducción rápida a la localización e internacionalización mira este video: -## Learn about Angular internationalization +## Aprende sobre la internacionalización de Angular - - Learn how to add the Angular Localize package to your project + + Aprende cómo agregar el paquete Angular Localize a tu proyecto - - Learn how to identify and specify a locale identifier for your project + + Aprende cómo identificar y especificar un identificador de configuración regional para tu proyecto - - Learn how to implement localized data pipes and override the locale for your project + + Aprende cómo implementar pipes de datos localizados y sobrescribir la configuración regional de tu proyecto - - Learn how to specify source text for translation + + Aprende cómo especificar texto fuente para traducción - - Learn how to review and process translation text + + Aprende cómo revisar y procesar texto de traducción - - Learn how to merge translations and build your translated application + + Aprende cómo fusionar traducciones y construir tu aplicación traducida - - Learn how to deploy multiple locales for your application + + Aprende cómo desplegar múltiples configuraciones regionales para tu aplicación - - Learn how to import locale data for language variants + + Aprende cómo importar datos de configuración regional para variantes de idioma - - Learn how to implement custom IDs to help you manage your marked text + + Aprende cómo implementar IDs personalizados para ayudarte a gestionar tu texto marcado - - Review an example of Angular internationalization. + + Revisa un ejemplo de internacionalización de Angular. diff --git a/adev-es/src/content/guide/i18n/prepare.en.md b/adev-es/src/content/guide/i18n/prepare.en.md new file mode 100644 index 0000000..88482a6 --- /dev/null +++ b/adev-es/src/content/guide/i18n/prepare.en.md @@ -0,0 +1,448 @@ +# Prepare component for translation + +To prepare your project for translation, complete the following actions. + +- Use the `i18n` attribute to mark text in component templates +- Use the `i18n-` attribute to mark attribute text strings in component templates +- Use the `$localize` tagged message string to mark text strings in component code + +## Mark text in component template + +In a component template, the i18n metadata is the value of the `i18n` attribute. + + +{string_to_translate} + + +Use the `i18n` attribute to mark a static text message in your component templates for translation. +Place it on every element tag that contains fixed text you want to translate. + +HELPFUL: The `i18n` attribute is a custom attribute that the Angular tools and compilers recognize. + +### `i18n` example + +The following `

` tag displays a simple English language greeting, "Hello i18n!". + + + +To mark the greeting for translation, add the `i18n` attribute to the `

` tag. + + + + +### using conditional statement with `i18n` + +The following `
` tag will display translated text as part of `div` and `aria-label` based on toggle status + + + + + + +### Translate inline text without HTML element + +Use the `` element to associate a translation behavior for specific text without changing the way text is displayed. + +HELPFUL: Each HTML element creates a new DOM element. +To avoid creating a new DOM element, wrap the text in an `` element. +The following example shows the `` element transformed into a non-displayed HTML comment. + + + +## Mark element attributes for translations + +In a component template, the i18n metadata is the value of the `i18n-{attribute_name}` attribute. + + + + + +The attributes of HTML elements include text that should be translated along with the rest of the displayed text in the component template. + +Use `i18n-{attribute_name}` with any attribute of any element and replace `{attribute_name}` with the name of the attribute. +Use the following syntax to assign a meaning, description, and custom ID. + + + + +i18n-{attribute_name}="{meaning}|{description}@@{id}" + + +### `i18n-title` example + +To translate the title of an image, review this example. +The following example displays an image with a `title` attribute. + + + +To mark the title attribute for translation, complete the following action. + +1. Add the `i18n-title` attribute + + The following example displays how to mark the `title` attribute on the `img` tag by adding `i18n-title`. + + + +## Mark text in component code + +In component code, the translation source text and the metadata are surrounded by backtick \(`\) characters. + +Use the [`$localize`][ApiLocalizeInitLocalize] tagged message string to mark a string in your code for translation. + + + + +$localize`string_to_translate`; + + +The i18n metadata is surrounded by colon \(`:`\) characters and prepends the translation source text. + + + + +$localize`:{i18n_metadata}:string_to_translate` + + +### Include interpolated text + +Include [interpolations](guide/templates/binding#render-dynamic-text-with-text-interpolation) in a [`$localize`][ApiLocalizeInitLocalize] tagged message string. + + + + +$localize`string_to_translate ${variable_name}`; + + +### Name the interpolation placeholder + + +$localize`string_to_translate ${variable_name}:placeholder_name:`; + + +### Conditional syntax for translations + + +return this.show ? $localize`Show Tabs` : $localize`Hide tabs`; + + + + +## i18n metadata for translation + + + + +{meaning}|{description}@@{custom_id} + + +The following parameters provide context and additional information to reduce confusion for your translator. + +| Metadata parameter | Details | +| :----------------- | :-------------------------------------------------------------------- | +| Custom ID | Provide a custom identifier | +| Description | Provide additional information or context | +| Meaning | Provide the meaning or intent of the text within the specific context | + +For additional information about custom IDs, see [Manage marked text with custom IDs][GuideI18nOptionalManageMarkedText]. + +### Add helpful descriptions and meanings + +To translate a text message accurately, provide additional information or context for the translator. + +Add a _description_ of the text message as the value of the `i18n` attribute or [`$localize`][ApiLocalizeInitLocalize] tagged message string. + +The following example shows the value of the `i18n` attribute. + + + +The following example shows the value of the [`$localize`][ApiLocalizeInitLocalize] tagged message string with a description. + + + + + +$localize`:An introduction header for this sample:Hello i18n!`; + + + +The translator may also need to know the meaning or intent of the text message within this particular application context, in order to translate it the same way as other text with the same meaning. +Start the `i18n` attribute value with the _meaning_ and separate it from the _description_ with the `|` character: `{meaning}|{description}`. + +#### `h1` example + +For example, you may want to specify that the `

` tag is a site header that you need translated the same way, whether it is used as a header or referenced in another section of text. + +The following example shows how to specify that the `

` tag must be translated as a header or referenced elsewhere. + + + +The result is any text marked with `site header`, as the _meaning_ is translated exactly the same way. + +The following code example shows the value of the [`$localize`][ApiLocalizeInitLocalize] tagged message string with a meaning and a description. + + + + + +$localize`:site header|An introduction header for this sample:Hello i18n!`; + + + + + +The Angular extraction tool generates a translation unit entry for each `i18n` attribute in a template. +The Angular extraction tool assigns each translation unit a unique ID based on the _meaning_ and _description_. + +HELPFUL: For more information about the Angular extraction tool, see [Work with translation files](guide/i18n/translation-files). + +The same text elements with different _meanings_ are extracted with different IDs. +For example, if the word "right" uses the following two definitions in two different locations, the word is translated differently and merged back into the application as different translation entries. + +- `correct` as in "you are right" +- `direction` as in "turn right" + +If the same text elements meet the following conditions, the text elements are extracted only once and use the same ID. + +- Same meaning or definition +- Different descriptions + +That one translation entry is merged back into the application wherever the same text elements appear. + + + +## ICU expressions + +ICU expressions help you mark alternate text in component templates to meet conditions. +An ICU expression includes a component property, an ICU clause, and the case statements surrounded by open curly brace \(`{`\) and close curly brace \(`}`\) characters. + + + + + +{ component_property, icu_clause, case_statements } + + + +The component property defines the variable. +An ICU clause defines the type of conditional text. + +| ICU clause | Details | +| :------------------------------------------------------------------- | :------------------------------------------------------------------ | +| [`plural`][GuideI18nCommonPrepareMarkPlurals] | Mark the use of plural numbers | +| [`select`][GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions] | Mark choices for alternate text based on your defined string values | + +To simplify translation, use International Components for Unicode clauses \(ICU clauses\) with regular expressions. + +HELPFUL: The ICU clauses adhere to the [ICU Message Format][GithubUnicodeOrgIcuUserguideFormatParseMessages] specified in the [CLDR pluralization rules][UnicodeCldrIndexCldrSpecPluralRules]. + +### Mark plurals + +Different languages have different pluralization rules that increase the difficulty of translation. +Because other locales express cardinality differently, you may need to set pluralization categories that do not align with English. +Use the `plural` clause to mark expressions that may not be meaningful if translated word-for-word. + + + + + +{ component_property, plural, pluralization_categories } + + + +After the pluralization category, enter the default text \(English\) surrounded by open curly brace \(`{`\) and close curly brace \(`}`\) characters. + + + + + +pluralization_category { } + + + +The following pluralization categories are available for English and may change based on the locale. + +| Pluralization category | Details | Example | +| :--------------------- | :------------------------- | :------------------------- | +| `zero` | Quantity is zero | `=0 { }`
`zero { }` | +| `one` | Quantity is 1 | `=1 { }`
`one { }` | +| `two` | Quantity is 2 | `=2 { }`
`two { }` | +| `few` | Quantity is 2 or more | `few { }` | +| `many` | Quantity is a large number | `many { }` | +| `other` | The default quantity | `other { }` | + +If none of the pluralization categories match, Angular uses `other` to match the standard fallback for a missing category. + + + + + +other { default_quantity } + + + +HELPFUL: For more information about pluralization categories, see [Choosing plural category names][UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames] in the [CLDR - Unicode Common Locale Data Repository][UnicodeCldrMain]. + + + +Many locales don't support some of the pluralization categories. +The default locale \(`en-US`\) uses a very simple `plural()` function that doesn't support the `few` pluralization category. +Another locale with a simple `plural()` function is `es`. +The following code example shows the [en-US `plural()`][GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL14L18] function. + + + +The `plural()` function only returns 1 \(`one`\) or 5 \(`other`\). +The `few` category never matches. + + + +#### `minutes` example + +If you want to display the following phrase in English, where `x` is a number. + + + + + +updated x minutes ago + + + +And you also want to display the following phrases based on the cardinality of `x`. + + + + + +updated just now + + + + + + + +updated one minute ago + + + +Use HTML markup and [interpolations](guide/templates/binding#render-dynamic-text-with-text-interpolation). +The following code example shows how to use the `plural` clause to express the previous three situations in a `` element. + + + +Review the following details in the previous code example. + +| Parameters | Details | +| :-------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | +| `minutes` | The first parameter specifies the component property is `minutes` and determines the number of minutes. | +| `plural` | The second parameter specifies the ICU clause is `plural`. | +| `=0 {just now}` | For zero minutes, the pluralization category is `=0`. The value is `just now`. | +| `=1 {one minute}` | For one minute, the pluralization category is `=1`. The value is `one minute`. | +| `other {{{minutes}} minutes ago}` | For any unmatched cardinality, the default pluralization category is `other`. The value is `{{minutes}} minutes ago`. | + +`{{minutes}}` is an [interpolation](guide/templates/binding#render-dynamic-text-with-text-interpolation). + +### Mark alternates and nested expressions + +The `select` clause marks choices for alternate text based on your defined string values. + + + + + +{ component_property, select, selection_categories } + + + +Translate all of the alternates to display alternate text based on the value of a variable. + +After the selection category, enter the text \(English\) surrounded by open curly brace \(`{`\) and close curly brace \(`}`\) characters. + + + + + +selection_category { text } + + + +Different locales have different grammatical constructions that increase the difficulty of translation. +Use HTML markup. +If none of the selection categories match, Angular uses `other` to match the standard fallback for a missing category. + + + + + +other { default_value } + + + +#### `gender` example + +If you want to display the following phrase in English. + + + + + +The author is other + + + +And you also want to display the following phrases based on the `gender` property of the component. + + + + + +The author is female + + + + + + + +The author is male + + + +The following code example shows how to bind the `gender` property of the component and use the `select` clause to express the previous three situations in a `` element. + +The `gender` property binds the outputs to each of following string values. + +| Value | English value | +| :----- | :------------ | +| female | `female` | +| male | `male` | +| other | `other` | + +The `select` clause maps the values to the appropriate translations. +The following code example shows `gender` property used with the select clause. + + + +#### `gender` and `minutes` example + +Combine different clauses together, such as the `plural` and `select` clauses. +The following code example shows nested clauses based on the `gender` and `minutes` examples. + + + +## What's next + + + + + +[ApiLocalizeInitLocalize]: api/localize/init/$localize '$localize | init - localize - API | Angular' +[GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions]: guide/i18n/prepare#mark-alternates-and-nested-expressions 'Mark alternates and nested expressions - Prepare templates for translation | Angular' +[GuideI18nCommonPrepareMarkPlurals]: guide/i18n/prepare#mark-plurals 'Mark plurals - Prepare component for translation | Angular' +[GuideI18nOptionalManageMarkedText]: guide/i18n/manage-marked-text 'Manage marked text with custom IDs | Angular' +[GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL14L18]: https://github.com/angular/angular/blob/ecffc3557fe1bff9718c01277498e877ca44588d/packages/core/src/i18n/locale_en.ts#L14-L18 'Line 14 to 18 - angular/packages/core/src/i18n/locale_en.ts | angular/angular | GitHub' +[GithubUnicodeOrgIcuUserguideFormatParseMessages]: https://unicode-org.github.io/icu/userguide/format_parse/messages 'ICU Message Format - ICU Documentation | Unicode | GitHub' +[UnicodeCldrMain]: https://cldr.unicode.org 'Unicode CLDR Project' +[UnicodeCldrIndexCldrSpecPluralRules]: http://cldr.unicode.org/index/cldr-spec/plural-rules 'Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode' +[UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames]: http://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Choosing-Plural-Category-Names 'Choosing Plural Category Names - Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode' diff --git a/adev-es/src/content/guide/i18n/prepare.md b/adev-es/src/content/guide/i18n/prepare.md index 88482a6..eeadda9 100644 --- a/adev-es/src/content/guide/i18n/prepare.md +++ b/adev-es/src/content/guide/i18n/prepare.md @@ -1,66 +1,66 @@ -# Prepare component for translation +# Preparar un componente para traducción -To prepare your project for translation, complete the following actions. +Para preparar tu proyecto para traducción, completa las siguientes acciones. -- Use the `i18n` attribute to mark text in component templates -- Use the `i18n-` attribute to mark attribute text strings in component templates -- Use the `$localize` tagged message string to mark text strings in component code +- Usa el atributo `i18n` para marcar texto en plantillas de componentes +- Usa el atributo `i18n-` para marcar cadenas de texto de atributos en plantillas de componentes +- Usa la cadena de mensaje etiquetada `$localize` para marcar cadenas de texto en código de componentes -## Mark text in component template +## Marcar texto en la plantilla del componente -In a component template, the i18n metadata is the value of the `i18n` attribute. +En una plantilla de componente, los metadatos i18n son el valor del atributo `i18n`. {string_to_translate} -Use the `i18n` attribute to mark a static text message in your component templates for translation. -Place it on every element tag that contains fixed text you want to translate. +Usa el atributo `i18n` para marcar un mensaje de texto estático en tus plantillas de componentes para traducción. +Colócalo en cada etiqueta de elemento que contenga texto fijo que quieras traducir. -HELPFUL: The `i18n` attribute is a custom attribute that the Angular tools and compilers recognize. +ÚTIL: El atributo `i18n` es un atributo personalizado que las herramientas y compiladores de Angular reconocen. -### `i18n` example +### Ejemplo de `i18n` -The following `

` tag displays a simple English language greeting, "Hello i18n!". +La siguiente etiqueta `

` muestra un saludo simple en inglés, "Hello i18n!". -To mark the greeting for translation, add the `i18n` attribute to the `

` tag. +Para marcar el saludo para traducción, agrega el atributo `i18n` a la etiqueta `

`. -### using conditional statement with `i18n` +### Usando la declaración condicional con `i18n` -The following `
` tag will display translated text as part of `div` and `aria-label` based on toggle status +La siguiente etiqueta `
` mostrará texto traducido como parte de `div` y `aria-label` según el estado del interruptor (toggle). -### Translate inline text without HTML element +### Traducir texto en línea sin un elemento HTML -Use the `` element to associate a translation behavior for specific text without changing the way text is displayed. +Usa el elemento `` para asociar un comportamiento de traducción para texto específico sin cambiar la forma en que se muestra el texto. -HELPFUL: Each HTML element creates a new DOM element. -To avoid creating a new DOM element, wrap the text in an `` element. -The following example shows the `` element transformed into a non-displayed HTML comment. +ÚTIL: Cada elemento HTML crea un nuevo elemento DOM. +Para evitar crear un nuevo elemento DOM, envuelve el texto en un elemento ``. +El siguiente ejemplo muestra el elemento `` transformado en un comentario HTML no visible. -## Mark element attributes for translations +## Marcar atributos de elementos para traducción -In a component template, the i18n metadata is the value of the `i18n-{attribute_name}` attribute. +En una plantilla de componente, los metadatos i18n son el valor del atributo `i18n-{attribute_name}`. -The attributes of HTML elements include text that should be translated along with the rest of the displayed text in the component template. +Los atributos de elementos HTML incluyen texto que debe traducirse junto con el resto del texto mostrado en la plantilla del componente. -Use `i18n-{attribute_name}` with any attribute of any element and replace `{attribute_name}` with the name of the attribute. -Use the following syntax to assign a meaning, description, and custom ID. +Usa `i18n-{attribute_name}` con cualquier atributo de cualquier elemento y reemplaza `{attribute_name}` con el nombre del atributo. +Usa la siguiente sintaxis para asignar un significado, descripción e ID personalizado. @@ -68,26 +68,26 @@ Use the following syntax to assign a meaning, description, and custom ID. i18n-{attribute_name}="{meaning}|{description}@@{id}" -### `i18n-title` example +### Ejemplo de `i18n-title` -To translate the title of an image, review this example. -The following example displays an image with a `title` attribute. +Para traducir el título de una imagen, revisa este ejemplo. +El siguiente ejemplo muestra una imagen con un atributo `title`. -To mark the title attribute for translation, complete the following action. +Para marcar el atributo title para traducción, completa la siguiente acción. -1. Add the `i18n-title` attribute +1. Agrega el atributo `i18n-title` - The following example displays how to mark the `title` attribute on the `img` tag by adding `i18n-title`. + El siguiente ejemplo muestra cómo marcar el atributo `title` en la etiqueta `img` agregando `i18n-title`. -## Mark text in component code +## Marcar texto en el código del componente -In component code, the translation source text and the metadata are surrounded by backtick \(`\) characters. +En el código del componente, el texto fuente de traducción y los metadatos están rodeados por caracteres de acento grave \(`\). -Use the [`$localize`][ApiLocalizeInitLocalize] tagged message string to mark a string in your code for translation. +Usa la cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize] para marcar una cadena en tu código para traducción. @@ -95,7 +95,7 @@ Use the [`$localize`][ApiLocalizeInitLocalize] tagged message string to mark a s $localize`string_to_translate`; -The i18n metadata is surrounded by colon \(`:`\) characters and prepends the translation source text. +Los metadatos i18n están rodeados por caracteres de dos puntos \(`:`\) y preceden al texto fuente de traducción. @@ -103,9 +103,9 @@ The i18n metadata is surrounded by colon \(`:`\) characters and prepends the tra $localize`:{i18n_metadata}:string_to_translate` -### Include interpolated text +### Incluir texto interpolado -Include [interpolations](guide/templates/binding#render-dynamic-text-with-text-interpolation) in a [`$localize`][ApiLocalizeInitLocalize] tagged message string. +Incluye [interpolaciones](guide/templates/binding#render-dynamic-text-with-text-interpolation) en una cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize]. @@ -113,13 +113,13 @@ Include [interpolations](guide/templates/binding#render-dynamic-text-with-text-i $localize`string_to_translate ${variable_name}`; -### Name the interpolation placeholder +### Nombrar el marcador de posición (placeholder) de la interpolación $localize`string_to_translate ${variable_name}:placeholder_name:`; -### Conditional syntax for translations +### Sintaxis condicional para traducciones return this.show ? $localize`Show Tabs` : $localize`Hide tabs`; @@ -127,7 +127,7 @@ return this.show ? $localize`Show Tabs` : $localize`Hide tabs`; -## i18n metadata for translation +## Metadatos i18n para traducción @@ -135,27 +135,27 @@ return this.show ? $localize`Show Tabs` : $localize`Hide tabs`; {meaning}|{description}@@{custom_id} -The following parameters provide context and additional information to reduce confusion for your translator. +Los siguientes parámetros proporcionan contexto e información adicional para reducir la confusión de tu traductor. -| Metadata parameter | Details | -| :----------------- | :-------------------------------------------------------------------- | -| Custom ID | Provide a custom identifier | -| Description | Provide additional information or context | -| Meaning | Provide the meaning or intent of the text within the specific context | +| Parámetro de metadatos | Detalles | +| :----------------- | :------------------------------------------------------------------------------ | +| ID personalizado | Proporciona un identificador personalizado | +| Descripción | Proporciona información adicional o contexto | +| Significado | Proporciona el significado o intención del texto dentro del contexto específico | -For additional information about custom IDs, see [Manage marked text with custom IDs][GuideI18nOptionalManageMarkedText]. +Para información adicional sobre IDs personalizados, consulta [Gestionar texto marcado con IDs personalizados][GuideI18nOptionalManageMarkedText]. -### Add helpful descriptions and meanings +### Agregar descripciones y significados útiles -To translate a text message accurately, provide additional information or context for the translator. +Para traducir un mensaje de texto con precisión, proporciona información adicional o contexto para el traductor. -Add a _description_ of the text message as the value of the `i18n` attribute or [`$localize`][ApiLocalizeInitLocalize] tagged message string. +Agrega una _descripción_ del mensaje de texto como valor del atributo `i18n` o cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize]. -The following example shows the value of the `i18n` attribute. +El siguiente ejemplo muestra el valor del atributo `i18n`. -The following example shows the value of the [`$localize`][ApiLocalizeInitLocalize] tagged message string with a description. +El siguiente ejemplo muestra el valor de la cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize] con una descripción. @@ -165,20 +165,20 @@ $localize`:An introduction header for this sample:Hello i18n!`; -The translator may also need to know the meaning or intent of the text message within this particular application context, in order to translate it the same way as other text with the same meaning. -Start the `i18n` attribute value with the _meaning_ and separate it from the _description_ with the `|` character: `{meaning}|{description}`. +El traductor también puede necesitar conocer el significado o intención del mensaje de texto dentro de este contexto particular de la aplicación, para traducirlo de la misma manera que otro texto con el mismo significado. +Comienza el valor del atributo `i18n` con el _significado_ y sepáralo de la _descripción_ con el carácter `|`: `{meaning}|{description}`. -#### `h1` example +#### Ejemplo de `h1` -For example, you may want to specify that the `

` tag is a site header that you need translated the same way, whether it is used as a header or referenced in another section of text. +Por ejemplo, puedes querer especificar que la etiqueta `

` es un encabezado de sitio que necesitas traducir de la misma manera, ya sea que se use como encabezado o se haga referencia en otra sección del texto. -The following example shows how to specify that the `

` tag must be translated as a header or referenced elsewhere. +El siguiente ejemplo muestra cómo especificar que la etiqueta `

` debe traducirse como un encabezado o referenciarse en otro lugar. -The result is any text marked with `site header`, as the _meaning_ is translated exactly the same way. +El resultado es que cualquier texto marcado con `site header`, como _significado_, se traduce exactamente de la misma manera. -The following code example shows the value of the [`$localize`][ApiLocalizeInitLocalize] tagged message string with a meaning and a description. +El siguiente ejemplo de código muestra el valor de la cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize] con un significado y una descripción. @@ -188,32 +188,32 @@ $localize`:site header|An introduction header for this sample:Hello i18n!`; - + -The Angular extraction tool generates a translation unit entry for each `i18n` attribute in a template. -The Angular extraction tool assigns each translation unit a unique ID based on the _meaning_ and _description_. +La herramienta de extracción de Angular genera una entrada de unidad de traducción para cada atributo `i18n` en una plantilla. +La herramienta de extracción de Angular asigna a cada unidad de traducción un ID único basado en el _significado_ y la _descripción_. -HELPFUL: For more information about the Angular extraction tool, see [Work with translation files](guide/i18n/translation-files). +ÚTIL: Para más información sobre la herramienta de extracción de Angular, consulta [Trabajar con archivos de traducción](guide/i18n/translation-files). -The same text elements with different _meanings_ are extracted with different IDs. -For example, if the word "right" uses the following two definitions in two different locations, the word is translated differently and merged back into the application as different translation entries. +Los mismos elementos de texto con diferentes _significados_ se extraen con IDs diferentes. +Por ejemplo, si la palabra "right" usa las siguientes dos definiciones en dos ubicaciones diferentes, la palabra se traduce de manera diferente y se fusiona de nuevo en la aplicación como entradas de traducción diferentes. -- `correct` as in "you are right" -- `direction` as in "turn right" +- `correct` como en "you are right" (estás en lo correcto) +- `direction` como en "turn right" (gira a la derecha) -If the same text elements meet the following conditions, the text elements are extracted only once and use the same ID. +Si los mismos elementos de texto cumplen las siguientes condiciones, los elementos de texto se extraen solo una vez y usan el mismo ID. -- Same meaning or definition -- Different descriptions +- Mismo significado o definición +- Diferentes descripciones -That one translation entry is merged back into the application wherever the same text elements appear. +Esa única entrada de traducción se fusiona de nuevo en la aplicación dondequiera que aparezcan los mismos elementos de texto. -## ICU expressions +## Expresiones ICU -ICU expressions help you mark alternate text in component templates to meet conditions. -An ICU expression includes a component property, an ICU clause, and the case statements surrounded by open curly brace \(`{`\) and close curly brace \(`}`\) characters. +Las expresiones ICU te ayudan a marcar texto alternativo en plantillas de componentes para cumplir condiciones. +Una expresión ICU incluye una propiedad del componente, una cláusula ICU y las declaraciones de caso rodeadas por caracteres de llave de apertura \(`{`\) y llave de cierre \(`}`\). @@ -223,23 +223,23 @@ An ICU expression includes a component property, an ICU clause, and the case sta -The component property defines the variable. -An ICU clause defines the type of conditional text. +La propiedad del componente define la variable. +Una cláusula ICU define el tipo de texto condicional. -| ICU clause | Details | +| Cláusula ICU | Detalles | | :------------------------------------------------------------------- | :------------------------------------------------------------------ | -| [`plural`][GuideI18nCommonPrepareMarkPlurals] | Mark the use of plural numbers | -| [`select`][GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions] | Mark choices for alternate text based on your defined string values | +| [`plural`][GuideI18nCommonPrepareMarkPlurals] | Marca el uso de números plurales | +| [`select`][GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions] | Marca opciones para texto alternativo basado en tus valores de cadena definidos | -To simplify translation, use International Components for Unicode clauses \(ICU clauses\) with regular expressions. +Para simplificar la traducción, usa cláusulas de Componentes Internacionales para Unicode \(cláusulas ICU\) con expresiones regulares. -HELPFUL: The ICU clauses adhere to the [ICU Message Format][GithubUnicodeOrgIcuUserguideFormatParseMessages] specified in the [CLDR pluralization rules][UnicodeCldrIndexCldrSpecPluralRules]. +ÚTIL: Las cláusulas ICU se adhieren al [Formato de Mensaje ICU][GithubUnicodeOrgIcuUserguideFormatParseMessages] especificado en las [reglas de pluralización CLDR][UnicodeCldrIndexCldrSpecPluralRules]. -### Mark plurals +### Marcar plurales -Different languages have different pluralization rules that increase the difficulty of translation. -Because other locales express cardinality differently, you may need to set pluralization categories that do not align with English. -Use the `plural` clause to mark expressions that may not be meaningful if translated word-for-word. +Diferentes idiomas tienen diferentes reglas de pluralización que aumentan la dificultad de traducción. +Debido a que otras configuraciones regionales expresan la cardinalidad de manera diferente, puedes necesitar establecer categorías de pluralización que no se alineen con el inglés. +Usa la cláusula `plural` para marcar expresiones que pueden no ser significativas si se traducen palabra por palabra. @@ -249,7 +249,7 @@ Use the `plural` clause to mark expressions that may not be meaningful if transl -After the pluralization category, enter the default text \(English\) surrounded by open curly brace \(`{`\) and close curly brace \(`}`\) characters. +Después de la categoría de pluralización, ingresa el texto predeterminado \(inglés\) rodeado por caracteres de llave de apertura \(`{`\) y llave de cierre \(`}`\). @@ -259,18 +259,18 @@ pluralization_category { } -The following pluralization categories are available for English and may change based on the locale. +Las siguientes categorías de pluralización están disponibles para inglés y pueden cambiar según la configuración regional. -| Pluralization category | Details | Example | +| Categoría de pluralización | Detalles | Ejemplo | | :--------------------- | :------------------------- | :------------------------- | -| `zero` | Quantity is zero | `=0 { }`
`zero { }` | -| `one` | Quantity is 1 | `=1 { }`
`one { }` | -| `two` | Quantity is 2 | `=2 { }`
`two { }` | -| `few` | Quantity is 2 or more | `few { }` | -| `many` | Quantity is a large number | `many { }` | -| `other` | The default quantity | `other { }` | +| `zero` | La cantidad es cero | `=0 { }`
`zero { }` | +| `one` | La cantidad es 1 | `=1 { }`
`one { }` | +| `two` | La cantidad es 2 | `=2 { }`
`two { }` | +| `few` | La cantidad es 2 o más | `few { }` | +| `many` | La cantidad es un número grande | `many { }` | +| `other` | La cantidad predeterminada | `other { }` | -If none of the pluralization categories match, Angular uses `other` to match the standard fallback for a missing category. +Si ninguna de las categorías de pluralización coincide, Angular usa `other` para coincidir con la opción de respaldo estándar para una categoría faltante. @@ -280,25 +280,25 @@ other { default_quantity } -HELPFUL: For more information about pluralization categories, see [Choosing plural category names][UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames] in the [CLDR - Unicode Common Locale Data Repository][UnicodeCldrMain]. +ÚTIL: Para más información sobre categorías de pluralización, consulta [Elegir nombres de categorías plurales][UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames] en [CLDR - Repositorio Común de Datos de Configuración Regional Unicode][UnicodeCldrMain]. - + -Many locales don't support some of the pluralization categories. -The default locale \(`en-US`\) uses a very simple `plural()` function that doesn't support the `few` pluralization category. -Another locale with a simple `plural()` function is `es`. -The following code example shows the [en-US `plural()`][GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL14L18] function. +Muchas configuraciones regionales no soportan algunas de las categorías de pluralización. +La configuración regional predeterminada \(`en-US`\) usa una función `plural()` muy simple que no soporta la categoría de pluralización `few`. +Otra configuración regional con una función `plural()` simple es `es`. +El siguiente ejemplo de código muestra la función [`plural()` de en-US][GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL14L18]. -The `plural()` function only returns 1 \(`one`\) or 5 \(`other`\). -The `few` category never matches. +La función `plural()` solo retorna 1 \(`one`\) o 5 \(`other`\). +La categoría `few` nunca coincide. -#### `minutes` example +#### Ejemplo de `minutes` -If you want to display the following phrase in English, where `x` is a number. +Si quieres mostrar la siguiente frase en inglés, donde `x` es un número. @@ -308,7 +308,7 @@ updated x minutes ago -And you also want to display the following phrases based on the cardinality of `x`. +Y también quieres mostrar las siguientes frases según la cardinalidad de `x`. @@ -326,26 +326,26 @@ updated one minute ago -Use HTML markup and [interpolations](guide/templates/binding#render-dynamic-text-with-text-interpolation). -The following code example shows how to use the `plural` clause to express the previous three situations in a `` element. +Usa marcado HTML e [interpolaciones](guide/templates/binding#render-dynamic-text-with-text-interpolation). +El siguiente ejemplo de código muestra cómo usar la cláusula `plural` para expresar las tres situaciones anteriores en un elemento ``. -Review the following details in the previous code example. +Revisa los siguientes detalles en el ejemplo de código anterior. -| Parameters | Details | +| Parámetros | Detalles | | :-------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | -| `minutes` | The first parameter specifies the component property is `minutes` and determines the number of minutes. | -| `plural` | The second parameter specifies the ICU clause is `plural`. | -| `=0 {just now}` | For zero minutes, the pluralization category is `=0`. The value is `just now`. | -| `=1 {one minute}` | For one minute, the pluralization category is `=1`. The value is `one minute`. | -| `other {{{minutes}} minutes ago}` | For any unmatched cardinality, the default pluralization category is `other`. The value is `{{minutes}} minutes ago`. | +| `minutes` | El primer parámetro especifica que la propiedad del componente es `minutes` y determina el número de minutos. | +| `plural` | El segundo parámetro especifica que la cláusula ICU es `plural`. | +| `=0 {just now}` | Para cero minutos, la categoría de pluralización es `=0`. El valor es `just now`. | +| `=1 {one minute}` | Para un minuto, la categoría de pluralización es `=1`. El valor es `one minute`. | +| `other {{{minutes}} minutes ago}` | Para cualquier cardinalidad no coincidente, la categoría de pluralización predeterminada es `other`. El valor es `{{minutes}} minutes ago`. | -`{{minutes}}` is an [interpolation](guide/templates/binding#render-dynamic-text-with-text-interpolation). +`{{minutes}}` es una [interpolación](guide/templates/binding#render-dynamic-text-with-text-interpolation). -### Mark alternates and nested expressions +### Marcar alternativas y expresiones anidadas -The `select` clause marks choices for alternate text based on your defined string values. +La cláusula `select` marca opciones para texto alternativo basado en tus valores de cadena definidos. @@ -355,9 +355,9 @@ The `select` clause marks choices for alternate text based on your defined strin -Translate all of the alternates to display alternate text based on the value of a variable. +Traduce todas las alternativas para mostrar texto alternativo basado en el valor de una variable. -After the selection category, enter the text \(English\) surrounded by open curly brace \(`{`\) and close curly brace \(`}`\) characters. +Después de la categoría de selección, ingresa el texto \(inglés\) rodeado por caracteres de llave de apertura \(`{`\) y llave de cierre \(`}`\). @@ -367,9 +367,9 @@ selection_category { text } -Different locales have different grammatical constructions that increase the difficulty of translation. -Use HTML markup. -If none of the selection categories match, Angular uses `other` to match the standard fallback for a missing category. +Diferentes configuraciones regionales tienen diferentes construcciones gramaticales que aumentan la dificultad de traducción. +Usa marcado HTML. +Si ninguna de las categorías de selección coincide, Angular usa `other` para coincidir con la opción de respaldo estándar para una categoría faltante. @@ -379,9 +379,9 @@ other { default_value } -#### `gender` example +#### Ejemplo de `gender` -If you want to display the following phrase in English. +Si quieres mostrar la siguiente frase en inglés. @@ -391,7 +391,7 @@ The author is other -And you also want to display the following phrases based on the `gender` property of the component. +Y también quieres mostrar las siguientes frases según la propiedad `gender` del componente. @@ -409,32 +409,32 @@ The author is male -The following code example shows how to bind the `gender` property of the component and use the `select` clause to express the previous three situations in a `` element. +El siguiente ejemplo de código muestra cómo vincular la propiedad `gender` del componente y usar la cláusula `select` para expresar las tres situaciones anteriores en un elemento ``. -The `gender` property binds the outputs to each of following string values. +La propiedad `gender` vincula las salidas a cada uno de los siguientes valores de cadena. -| Value | English value | +| Valor | Valor en inglés | | :----- | :------------ | | female | `female` | | male | `male` | | other | `other` | -The `select` clause maps the values to the appropriate translations. -The following code example shows `gender` property used with the select clause. +La cláusula `select` asigna los valores a las traducciones apropiadas. +El siguiente ejemplo de código muestra la propiedad `gender` usada con la cláusula select. -#### `gender` and `minutes` example +#### Ejemplo de `gender` y `minutes` -Combine different clauses together, such as the `plural` and `select` clauses. -The following code example shows nested clauses based on the `gender` and `minutes` examples. +Combina diferentes cláusulas juntas, como las cláusulas `plural` y `select`. +El siguiente ejemplo de código muestra cláusulas anidadas basadas en los ejemplos de `gender` y `minutes`. -## What's next +## Próximos pasos - + [ApiLocalizeInitLocalize]: api/localize/init/$localize '$localize | init - localize - API | Angular' diff --git a/adev-es/src/content/guide/i18n/translation-files.md b/adev-es/src/content/guide/i18n/translation-files.md index 5b90e60..296dcaf 100644 --- a/adev-es/src/content/guide/i18n/translation-files.md +++ b/adev-es/src/content/guide/i18n/translation-files.md @@ -1,56 +1,56 @@ -# Work with translation files +# Trabajar con archivos de traducción -After you prepare a component for translation, use the [`extract-i18n`][CliExtractI18n] [Angular CLI][CliMain] command to extract the marked text in the component into a *source language* file. +Después de preparar un componente para traducción, usa el comando [`extract-i18n`][CliExtractI18n] del [CLI de Angular][CliMain] para extraer el texto marcado en el componente a un archivo de *idioma fuente*. -The marked text includes text marked with `i18n`, attributes marked with `i18n-`*attribute*, and text tagged with `$localize` as described in [Prepare component for translation][GuideI18nCommonPrepare]. +El texto marcado incluye texto marcado con `i18n`, atributos marcados con `i18n-`*atributo*, y texto etiquetado con `$localize` como se describe en [Preparar un componente para traducción][GuideI18nCommonPrepare]. -Complete the following steps to create and update translation files for your project. +Completa los siguientes pasos para crear y actualizar archivos de traducción para tu proyecto. -1. [Extract the source language file][GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile]. - 1. Optionally, change the location, format, and name. -1. Copy the source language file to [create a translation file for each language][GuideI18nCommonTranslationFilesCreateATranslationFileForEachLanguage]. -1. [Translate each translation file][GuideI18nCommonTranslationFilesTranslateEachTranslationFile]. -1. Translate plurals and alternate expressions separately. - 1. [Translate plurals][GuideI18nCommonTranslationFilesTranslatePlurals]. - 1. [Translate alternate expressions][GuideI18nCommonTranslationFilesTranslateAlternateExpressions]. - 1. [Translate nested expressions][GuideI18nCommonTranslationFilesTranslateNestedExpressions]. +1. [Extrae el archivo de idioma fuente][GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile]. + 1. Opcionalmente, cambia la ubicación, el formato y el nombre. +1. Copia el archivo de idioma fuente para [crear un archivo de traducción para cada idioma][GuideI18nCommonTranslationFilesCreateATranslationFileForEachLanguage]. +1. [Traduce cada archivo de traducción][GuideI18nCommonTranslationFilesTranslateEachTranslationFile]. +1. Traduce por separado los plurales y las expresiones alternativas. + 1. [Traduce los plurales][GuideI18nCommonTranslationFilesTranslatePlurals]. + 1. [Traduce las expresiones alternativas][GuideI18nCommonTranslationFilesTranslateAlternateExpressions]. + 1. [Traduce las expresiones anidadas][GuideI18nCommonTranslationFilesTranslateNestedExpressions]. -## Extract the source language file +## Extraer el archivo de idioma fuente -To extract the source language file, complete the following actions. +Para extraer el archivo de idioma fuente, completa las siguientes acciones. -1. Open a terminal window. -1. Change to the root directory of your project. -1. Run the following CLI command. +1. Abre una ventana de terminal. +1. Cambia al directorio raíz de tu proyecto. +1. Ejecuta el siguiente comando del CLI. -The `extract-i18n` command creates a source language file named `messages.xlf` in the root directory of your project. -For more information about the XML Localization Interchange File Format \(XLIFF, version 1.2\), see [XLIFF][WikipediaWikiXliff]. +El comando `extract-i18n` crea un archivo de idioma fuente llamado `messages.xlf` en el directorio raíz de tu proyecto. +Para más información sobre el Formato de Intercambio de Localización XML \(XLIFF, versión 1.2\), consulta [XLIFF][WikipediaWikiXliff]. -Use the following [`extract-i18n`][CliExtractI18n] command options to change the source language file location, format, and file name. +Usa las siguientes opciones del comando [`extract-i18n`][CliExtractI18n] para cambiar la ubicación, el formato y el nombre del archivo de idioma fuente. -| Command option | Details | +| Opción de comando | Detalles | |:--- |:--- | -| `--format` | Set the format of the output file | -| `--out-file` | Set the name of the output file | -| `--output-path` | Set the path of the output directory | +| `--format` | Establece el formato del archivo de salida | +| `--out-file` | Establece el nombre del archivo de salida | +| `--output-path` | Establece la ruta del directorio de salida | -### Change the source language file location +### Cambiar la ubicación del archivo de idioma fuente -To create a file in the `src/locale` directory, specify the output path as an option. +Para crear un archivo en el directorio `src/locale`, especifica la ruta de salida como una opción. -#### `extract-i18n --output-path` example +#### Ejemplo de `extract-i18n --output-path` -The following example specifies the output path as an option. +El siguiente ejemplo especifica la ruta de salida como una opción. -### Change the source language file format +### Cambiar el formato del archivo de idioma fuente -The `extract-i18n` command creates files in the following translation formats. +El comando `extract-i18n` crea archivos en los siguientes formatos de traducción. -| Translation format | Details | File extension | +| Formato de traducción | Detalles | Extensión de archivo | |:--- |:--- |:--- | | ARB | [Application Resource Bundle][GithubGoogleAppResourceBundleWikiApplicationresourcebundlespecification] | `.arb` | | JSON | [JavaScript Object Notation][JsonMain] | `.json` | @@ -58,33 +58,33 @@ The `extract-i18n` command creates files in the following translation formats. | XLIFF 2 | [XML Localization Interchange File Format, version 2][OasisOpenDocsXliffXliffCoreV20Cos01XliffCoreV20Cose01Html] | `.xlf` | | XMB | [XML Message Bundle][UnicodeCldrDevelopmentDevelopmentProcessDesignProposalsXmb] | `.xmb` \(`.xtb`\) | -Specify the translation format explicitly with the `--format` command option. +Especifica el formato de traducción explícitamente con la opción de comando `--format`. -HELPFUL: The XMB format generates `.xmb` source language files, but uses`.xtb` translation files. +ÚTIL: El formato XMB genera archivos de idioma fuente `.xmb`, pero usa archivos de traducción `.xtb`. -#### `extract-i18n --format` example +#### Ejemplo de `extract-i18n --format` -The following example demonstrates several translation formats. +El siguiente ejemplo demuestra varios formatos de traducción. -### Change the source language file name +### Cambiar el nombre del archivo de idioma fuente -To change the name of the source language file generated by the extraction tool, use the `--out-file` command option. +Para cambiar el nombre del archivo de idioma fuente generado por la herramienta de extracción, usa la opción de comando `--out-file`. -#### `extract-i18n --out-file` example +#### Ejemplo de `extract-i18n --out-file` -The following example demonstrates naming the output file. +El siguiente ejemplo demuestra cómo nombrar el archivo de salida. -## Create a translation file for each language +## Crear un archivo de traducción para cada idioma -To create a translation file for a locale or language, complete the following actions. +Para crear un archivo de traducción para una configuración regional o idioma, completa las siguientes acciones. -1. [Extract the source language file][GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile]. -1. Make a copy of the source language file to create a *translation* file for each language. -1. Rename the *translation* file to add the locale. +1. [Extrae el archivo de idioma fuente][GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile]. +1. Haz una copia del archivo de idioma fuente para crear un archivo de *traducción* para cada idioma. +1. Cambia el nombre del archivo de *traducción* para agregar la configuración regional. @@ -92,7 +92,7 @@ To create a translation file for a locale or language, complete the following ac -1. Create a new directory at your project root named `locale`. +1. Crea un nuevo directorio en la raíz de tu proyecto llamado `locale`. @@ -100,126 +100,126 @@ To create a translation file for a locale or language, complete the following ac -1. Move the *translation* file to the new directory. -1. Send the *translation* file to your translator. -1. Repeat the above steps for each language you want to add to your application. +1. Mueve el archivo de *traducción* al nuevo directorio. +1. Envía el archivo de *traducción* a tu traductor. +1. Repite los pasos anteriores para cada idioma que quieras agregar a tu aplicación. -### `extract-i18n` example for French +### Ejemplo de `extract-i18n` para francés -For example, to create a French translation file, complete the following actions. +Por ejemplo, para crear un archivo de traducción al francés, completa las siguientes acciones. -1. Run the `extract-i18n` command. -1. Make a copy of the `messages.xlf` source language file. -1. Rename the copy to `messages.fr.xlf` for the French language \(`fr`\) translation. -1. Move the `fr` translation file to the `src/locale` directory. -1. Send the `fr` translation file to the translator. +1. Ejecuta el comando `extract-i18n`. +1. Haz una copia del archivo de idioma fuente `messages.xlf`. +1. Cambia el nombre de la copia a `messages.fr.xlf` para la traducción al francés \(`fr`\). +1. Mueve el archivo de traducción `fr` al directorio `src/locale`. +1. Envía el archivo de traducción `fr` al traductor. -## Translate each translation file +## Traducir cada archivo de traducción -Unless you are fluent in the language and have the time to edit translations, you will likely complete the following steps. +A menos que seas fluido en el idioma y tengas tiempo para editar traducciones, probablemente completarás los siguientes pasos. -1. Send each translation file to a translator. -1. The translator uses an XLIFF file editor to complete the following actions. - 1. Create the translation. - 1. Edit the translation. +1. Envía cada archivo de traducción a un traductor. +1. El traductor usa un editor de archivos XLIFF para completar las siguientes acciones. + 1. Crear la traducción. + 1. Editar la traducción. -### Translation process example for French +### Ejemplo del proceso de traducción para francés -To demonstrate the process, review the `messages.fr.xlf` file in the [Example Angular Internationalization application][GuideI18nExample]. The [Example Angular Internationalization application][GuideI18nExample] includes a French translation for you to edit without a special XLIFF editor or knowledge of French. +Para demostrar el proceso, revisa el archivo `messages.fr.xlf` en la [Aplicación de ejemplo de internacionalización de Angular][GuideI18nExample]. La [Aplicación de ejemplo de internacionalización de Angular][GuideI18nExample] incluye una traducción al francés para que la edites sin un editor XLIFF especial ni conocimiento de francés. -The following actions describe the translation process for French. +Las siguientes acciones describen el proceso de traducción para francés. -1. Open `messages.fr.xlf` and find the first `` element. - This is a *translation unit*, also known as a *text node*, that represents the translation of the `

` greeting tag that was previously marked with the `i18n` attribute. +1. Abre `messages.fr.xlf` y encuentra el primer elemento ``. + Esta es una *unidad de traducción*, también conocida como *nodo de texto*, que representa la traducción de la etiqueta de saludo `

` que fue previamente marcada con el atributo `i18n`. - The `id="introductionHeader"` is a [custom ID][GuideI18nOptionalManageMarkedText], but without the `@@` prefix required in the source HTML. + El `id="introductionHeader"` es un [ID personalizado][GuideI18nOptionalManageMarkedText], pero sin el prefijo `@@` requerido en el HTML fuente. -1. Duplicate the `... ` element in the text node, rename it to `target`, and then replace the content with the French text. +1. Duplica el elemento `... ` en el nodo de texto, cámbiale el nombre a `target` y luego reemplaza el contenido con el texto en francés. - In a more complex translation, the information and context in the [description and meaning elements][GuideI18nCommonPrepareAddHelpfulDescriptionsAndMeanings] help you choose the right words for translation. + En una traducción más compleja, la información y el contexto en los [elementos de descripción y significado][GuideI18nCommonPrepareAddHelpfulDescriptionsAndMeanings] te ayudan a elegir las palabras correctas para la traducción. -1. Translate the other text nodes. - The following example displays the way to translate. +1. Traduce los otros nodos de texto. + El siguiente ejemplo muestra la forma de traducir. -IMPORTANT: Don't change the IDs for translation units. -Each `id` attribute is generated by Angular and depends on the content of the component text and the assigned meaning. +IMPORTANTE: No cambies los IDs de las unidades de traducción. +Cada atributo `id` es generado por Angular y depende del contenido del texto del componente y del significado asignado. -If you change either the text or the meaning, then the `id` attribute changes. -For more about managing text updates and IDs, see [custom IDs][GuideI18nOptionalManageMarkedText]. +Si cambias el texto o el significado, entonces el atributo `id` cambia. +Para más información sobre cómo gestionar actualizaciones de texto e IDs, consulta [IDs personalizados][GuideI18nOptionalManageMarkedText]. -## Translate plurals +## Traducir plurales -Add or remove plural cases as needed for each language. +Agrega o elimina casos de plural según sea necesario para cada idioma. -HELPFUL: For language plural rules, see [CLDR plural rules][GithubUnicodeOrgCldrStagingChartsLatestSupplementalLanguagePluralRulesHtml]. +ÚTIL: Para reglas de plural por idioma, consulta [Reglas de plural de CLDR][GithubUnicodeOrgCldrStagingChartsLatestSupplementalLanguagePluralRulesHtml]. -### `minute` `plural` example +### Ejemplo de `minute` `plural` -To translate a `plural`, translate the ICU format match values. +Para traducir un `plural`, traduce los valores de coincidencia del formato ICU. * `just now` * `one minute ago` * ` minutes ago` -The following example displays the way to translate. +El siguiente ejemplo muestra la forma de traducir. -## Translate alternate expressions +## Traducir expresiones alternativas -Angular also extracts alternate `select` ICU expressions as separate translation units. +Angular también extrae expresiones ICU `select` alternativas como unidades de traducción separadas. -### `gender` `select` example +### Ejemplo de `gender` `select` -The following example displays a `select` ICU expression in the component template. +El siguiente ejemplo muestra una expresión ICU `select` en la plantilla del componente. -In this example, Angular extracts the expression into two translation units. -The first contains the text outside of the `select` clause, and uses a placeholder for `select` \(``\): +En este ejemplo, Angular extrae la expresión en dos unidades de traducción. +La primera contiene el texto fuera de la cláusula `select` y usa un marcador de posición para `select` \(``\): -IMPORTANT: When you translate the text, move the placeholder if necessary, but don't remove it. -If you remove the placeholder, the ICU expression is removed from your translated application. +IMPORTANTE: Cuando traduzcas el texto, mueve el marcador de posición si es necesario, pero no lo elimines. +Si eliminas el marcador de posición, la expresión ICU se elimina de tu aplicación traducida. -The following example displays the second translation unit that contains the `select` clause. +El siguiente ejemplo muestra la segunda unidad de traducción que contiene la cláusula `select`. -The following example displays both translation units after translation is complete. +El siguiente ejemplo muestra ambas unidades de traducción después de completar la traducción. -## Translate nested expressions +## Traducir expresiones anidadas -Angular treats a nested expression in the same manner as an alternate expression. -Angular extracts the expression into two translation units. +Angular trata una expresión anidada de la misma manera que una expresión alternativa. +Angular extrae la expresión en dos unidades de traducción. -### Nested `plural` example +### Ejemplo de `plural` anidado -The following example displays the first translation unit that contains the text outside of the nested expression. +El siguiente ejemplo muestra la primera unidad de traducción que contiene el texto fuera de la expresión anidada. -The following example displays the second translation unit that contains the complete nested expression. +El siguiente ejemplo muestra la segunda unidad de traducción que contiene la expresión anidada completa. -The following example displays both translation units after translating. +El siguiente ejemplo muestra ambas unidades de traducción después de traducir. -## What's next +## Próximos pasos - + [CliMain]: cli "CLI Overview and Command Reference | Angular" diff --git a/adev-es/src/content/guide/i18n/translations-files.en.md b/adev-es/src/content/guide/i18n/translations-files.en.md new file mode 100644 index 0000000..6ee0a25 --- /dev/null +++ b/adev-es/src/content/guide/i18n/translations-files.en.md @@ -0,0 +1,253 @@ +# Work with translation files + +After you prepare a component for translation, use the [`extract-i18n`][CliExtractI18n] [Angular CLI][CliMain] command to extract the marked text in the component into a *source language* file. + +The marked text includes text marked with `i18n`, attributes marked with `i18n-`*attribute*, and text tagged with `$localize` as described in [Prepare component for translation][GuideI18nCommonPrepare]. + +Complete the following steps to create and update translation files for your project. + +1. [Extract the source language file][GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile]. + 1. Optionally, change the location, format, and name. +1. Copy the source language file to [create a translation file for each language][GuideI18nCommonTranslationFilesCreateATranslationFileForEachLanguage]. +1. [Translate each translation file][GuideI18nCommonTranslationFilesTranslateEachTranslationFile]. +1. Translate plurals and alternate expressions separately. + 1. [Translate plurals][GuideI18nCommonTranslationFilesTranslatePlurals]. + 1. [Translate alternate expressions][GuideI18nCommonTranslationFilesTranslateAlternateExpressions]. + 1. [Translate nested expressions][GuideI18nCommonTranslationFilesTranslateNestedExpressions]. + +## Extract the source language file + +To extract the source language file, complete the following actions. + +1. Open a terminal window. +1. Change to the root directory of your project. +1. Run the following CLI command. + + + +The `extract-i18n` command creates a source language file named `messages.xlf` in the root directory of your project. +For more information about the XML Localization Interchange File Format \(XLIFF, version 1.2\), see [XLIFF][WikipediaWikiXliff]. + +Use the following [`extract-i18n`][CliExtractI18n] command options to change the source language file location, format, and file name. + +| Command option | Details | +|:--- |:--- | +| `--format` | Set the format of the output file | +| `--out-file` | Set the name of the output file | +| `--output-path` | Set the path of the output directory | + +### Change the source language file location + +To create a file in the `src/locale` directory, specify the output path as an option. + +#### `extract-i18n --output-path` example + +The following example specifies the output path as an option. + + + +### Change the source language file format + +The `extract-i18n` command creates files in the following translation formats. + +| Translation format | Details | File extension | +|:--- |:--- |:--- | +| ARB | [Application Resource Bundle][GithubGoogleAppResourceBundleWikiApplicationresourcebundlespecification] | `.arb` | +| JSON | [JavaScript Object Notation][JsonMain] | `.json` | +| XLIFF 1.2 | [XML Localization Interchange File Format, version 1.2][OasisOpenDocsXliffXliffCoreXliffCoreHtml] | `.xlf` | +| XLIFF 2 | [XML Localization Interchange File Format, version 2][OasisOpenDocsXliffXliffCoreV20Cos01XliffCoreV20Cose01Html] | `.xlf` | +| XMB | [XML Message Bundle][UnicodeCldrDevelopmentDevelopmentProcessDesignProposalsXmb] | `.xmb` \(`.xtb`\) | + +Specify the translation format explicitly with the `--format` command option. + +HELPFUL: The XMB format generates `.xmb` source language files, but uses`.xtb` translation files. + +#### `extract-i18n --format` example + +The following example demonstrates several translation formats. + + + +### Change the source language file name + +To change the name of the source language file generated by the extraction tool, use the `--out-file` command option. + +#### `extract-i18n --out-file` example + +The following example demonstrates naming the output file. + + + +## Create a translation file for each language + +To create a translation file for a locale or language, complete the following actions. + +1. [Extract the source language file][GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile]. +1. Make a copy of the source language file to create a *translation* file for each language. +1. Rename the *translation* file to add the locale. + + + + messages.xlf --> messages.{locale}.xlf + + + +1. Create a new directory at your project root named `locale`. + + + + src/locale + + + +1. Move the *translation* file to the new directory. +1. Send the *translation* file to your translator. +1. Repeat the above steps for each language you want to add to your application. + +### `extract-i18n` example for French + +For example, to create a French translation file, complete the following actions. + +1. Run the `extract-i18n` command. +1. Make a copy of the `messages.xlf` source language file. +1. Rename the copy to `messages.fr.xlf` for the French language \(`fr`\) translation. +1. Move the `fr` translation file to the `src/locale` directory. +1. Send the `fr` translation file to the translator. + +## Translate each translation file + +Unless you are fluent in the language and have the time to edit translations, you will likely complete the following steps. + +1. Send each translation file to a translator. +1. The translator uses an XLIFF file editor to complete the following actions. + 1. Create the translation. + 1. Edit the translation. + +### Translation process example for French + +To demonstrate the process, review the `messages.fr.xlf` file in the [Example Angular Internationalization application][GuideI18nExample]. The [Example Angular Internationalization application][GuideI18nExample] includes a French translation for you to edit without a special XLIFF editor or knowledge of French. + +The following actions describe the translation process for French. + +1. Open `messages.fr.xlf` and find the first `` element. + This is a *translation unit*, also known as a *text node*, that represents the translation of the `

` greeting tag that was previously marked with the `i18n` attribute. + + + + The `id="introductionHeader"` is a [custom ID][GuideI18nOptionalManageMarkedText], but without the `@@` prefix required in the source HTML. + +1. Duplicate the `... ` element in the text node, rename it to `target`, and then replace the content with the French text. + + + + In a more complex translation, the information and context in the [description and meaning elements][GuideI18nCommonPrepareAddHelpfulDescriptionsAndMeanings] help you choose the right words for translation. + +1. Translate the other text nodes. + The following example displays the way to translate. + + + +IMPORTANT: Don't change the IDs for translation units. +Each `id` attribute is generated by Angular and depends on the content of the component text and the assigned meaning. + +If you change either the text or the meaning, then the `id` attribute changes. +For more about managing text updates and IDs, see [custom IDs][GuideI18nOptionalManageMarkedText]. + +## Translate plurals + +Add or remove plural cases as needed for each language. + +HELPFUL: For language plural rules, see [CLDR plural rules][GithubUnicodeOrgCldrStagingChartsLatestSupplementalLanguagePluralRulesHtml]. + +### `minute` `plural` example + +To translate a `plural`, translate the ICU format match values. + +* `just now` +* `one minute ago` +* ` minutes ago` + +The following example displays the way to translate. + + + +## Translate alternate expressions + +Angular also extracts alternate `select` ICU expressions as separate translation units. + +### `gender` `select` example + +The following example displays a `select` ICU expression in the component template. + + + +In this example, Angular extracts the expression into two translation units. +The first contains the text outside of the `select` clause, and uses a placeholder for `select` \(``\): + + + +IMPORTANT: When you translate the text, move the placeholder if necessary, but don't remove it. +If you remove the placeholder, the ICU expression is removed from your translated application. + +The following example displays the second translation unit that contains the `select` clause. + + + +The following example displays both translation units after translation is complete. + + + +## Translate nested expressions + +Angular treats a nested expression in the same manner as an alternate expression. +Angular extracts the expression into two translation units. + +### Nested `plural` example + +The following example displays the first translation unit that contains the text outside of the nested expression. + + + +The following example displays the second translation unit that contains the complete nested expression. + + + +The following example displays both translation units after translating. + + + +## What's next + + + + + +[CliMain]: cli "CLI Overview and Command Reference | Angular" +[CliExtractI18n]: cli/extract-i18n "ng extract-i18n | CLI | Angular" + +[GuideI18nCommonPrepare]: guide/i18n/prepare "Prepare component for translation | Angular" +[GuideI18nCommonPrepareAddHelpfulDescriptionsAndMeanings]: guide/i18n/prepare#add-helpful-descriptions-and-meanings "Add helpful descriptions and meanings - Prepare component for translation | Angular" + +[GuideI18nCommonTranslationFilesCreateATranslationFileForEachLanguage]: guide/i18n/translation-files#create-a-translation-file-for-each-language "Create a translation file for each language - Work with translation files | Angular" +[GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile]: guide/i18n/translation-files#extract-the-source-language-file "Extract the source language file - Work with translation files | Angular" +[GuideI18nCommonTranslationFilesTranslateAlternateExpressions]: guide/i18n/translation-files#translate-alternate-expressions "Translate alternate expressions - Work with translation files | Angular" +[GuideI18nCommonTranslationFilesTranslateEachTranslationFile]: guide/i18n/translation-files#translate-each-translation-file "Translate each translation file - Work with translation files | Angular" +[GuideI18nCommonTranslationFilesTranslateNestedExpressions]: guide/i18n/translation-files#translate-nested-expressions "Translate nested expressions - Work with translation files | Angular" +[GuideI18nCommonTranslationFilesTranslatePlurals]: guide/i18n/translation-files#translate-plurals "Translate plurals - Work with translation files | Angular" + +[GuideI18nExample]: guide/i18n/example "Example Angular Internationalization application | Angular" + +[GuideI18nOptionalManageMarkedText]: guide/i18n/manage-marked-text "Manage marked text with custom IDs | Angular" + +[GithubGoogleAppResourceBundleWikiApplicationresourcebundlespecification]: https://github.com/google/app-resource-bundle/wiki/ApplicationResourceBundleSpecification "ApplicationResourceBundleSpecification | google/app-resource-bundle | GitHub" + +[GithubUnicodeOrgCldrStagingChartsLatestSupplementalLanguagePluralRulesHtml]: https://cldr.unicode.org/index/cldr-spec/plural-rules "Language Plural Rules - CLDR Charts | Unicode | GitHub" + +[JsonMain]: https://www.json.org "Introducing JSON | JSON" + +[OasisOpenDocsXliffXliffCoreXliffCoreHtml]: http://docs.oasis-open.org/xliff/xliff-core/xliff-core.html "XLIFF Version 1.2 Specification | Oasis Open Docs" +[OasisOpenDocsXliffXliffCoreV20Cos01XliffCoreV20Cose01Html]: http://docs.oasis-open.org/xliff/xliff-core/v2.0/cos01/xliff-core-v2.0-cos01.html "XLIFF Version 2.0 | Oasis Open Docs" + +[UnicodeCldrDevelopmentDevelopmentProcessDesignProposalsXmb]: http://cldr.unicode.org/development/development-process/design-proposals/xmb "XMB | CLDR - Unicode Common Locale Data Repository | Unicode" + +[WikipediaWikiXliff]: https://en.wikipedia.org/wiki/XLIFF "XLIFF | Wikipedia"