docs(i18n): incorporate corrections and feedback from Victor Berchet (#2517)
See PR #2491
This commit is contained in:
parent
66e3eca8eb
commit
ba6b681ed4
|
@ -9,13 +9,13 @@ export function getTranslationProviders(): Promise<Object[]> {
|
||||||
// return no providers if fail to get translation file for locale
|
// return no providers if fail to get translation file for locale
|
||||||
const noProviders: Object[] = [];
|
const noProviders: Object[] = [];
|
||||||
|
|
||||||
// No locale or English: no translation providers
|
// No locale or U.S. English: no translation providers
|
||||||
if (!locale || locale === 'en') {
|
if (!locale || locale === 'en-US') {
|
||||||
return Promise.resolve(noProviders);
|
return Promise.resolve(noProviders);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ex: 'i18n/fr/messages.fr.xlf`
|
// Ex: 'locale/messages.fr.xlf`
|
||||||
const translationFile = `./i18n/${locale}/messages.${locale}.xlf`;
|
const translationFile = `./locale/messages.${locale}.xlf`;
|
||||||
|
|
||||||
return getTranslationsWithSystemJs(translationFile)
|
return getTranslationsWithSystemJs(translationFile)
|
||||||
.then( (translations: string ) => [
|
.then( (translations: string ) => [
|
||||||
|
|
|
@ -4,8 +4,8 @@
|
||||||
"app/**/*.css",
|
"app/**/*.css",
|
||||||
"app/**/*.html",
|
"app/**/*.html",
|
||||||
"app/**/*.ts",
|
"app/**/*.ts",
|
||||||
"i18n/messages.xlf",
|
"locale/messages.xlf",
|
||||||
"i18n/fr/messages.fr.xlf",
|
"locale/messages.fr.xlf",
|
||||||
|
|
||||||
"!**/*.[1].*",
|
"!**/*.[1].*",
|
||||||
|
|
||||||
|
|
Binary file not shown.
|
@ -1,16 +1,16 @@
|
||||||
include ../_util-fns
|
include ../_util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Angular's _internationalization_ ("_i18n_") tools help make your app availble in multiple languages.
|
Angular's _internationalization_ ("_i18n_") tools help make your app available in multiple languages.
|
||||||
|
|
||||||
<a id="top"></a>
|
<a id="top"></a>
|
||||||
## Table of contents
|
## Table of contents
|
||||||
|
|
||||||
* [Angular and i18n template translation](#angular-i18n)
|
* [Angular and i18n template translation](#angular-i18n)
|
||||||
* [Mark text with the _i18n_ attribute](#i18n-attribute)
|
* [Mark text with the _i18n_ attribute](#i18n-attribute)
|
||||||
* [Extract text with ng-xi18n](#ng-xi18n)
|
* [Create a translation source file with the _ng-xi18n_ tool](#ng-xi18n)
|
||||||
* [Translate](#translate)
|
* [Translate](#translate)
|
||||||
* [Merge the translation file into the app](#merge)
|
* [Merge the completed translation file into the app](#merge)
|
||||||
* [JiT configuration](#jit)
|
* [JiT configuration](#jit)
|
||||||
* [AoT configuration](#aot)
|
* [AoT configuration](#aot)
|
||||||
|
|
||||||
|
@ -30,6 +30,7 @@ a#angular-i18n
|
||||||
This page describes the _i18n_ tools to assist translation of component template text
|
This page describes the _i18n_ tools to assist translation of component template text
|
||||||
into multiple languages.
|
into multiple languages.
|
||||||
|
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Practitioners of _internationalization_ refer to a translatable text as a "_message_".
|
Practitioners of _internationalization_ refer to a translatable text as a "_message_".
|
||||||
|
@ -61,7 +62,9 @@ a#i18n-attribute
|
||||||
|
|
||||||
.alert.is-helpful
|
.alert.is-helpful
|
||||||
:marked
|
:marked
|
||||||
`i18n` is not an Angular _directive_. It's a custom _attribute_, recognized by Angular tools and compilers.
|
`i18n` is not an Angular _directive_.
|
||||||
|
It's a custom _attribute_, recognized by Angular tools and compilers.
|
||||||
|
It will be removed by the compiler _after_ translation.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
In the accompanying sample, an `<h1>` tag displays a simple English language greeting which you will translate to French:
|
In the accompanying sample, an `<h1>` tag displays a simple English language greeting which you will translate to French:
|
||||||
|
@ -87,16 +90,17 @@ a#i18n-attribute
|
||||||
While all appearance of a message with the _same_ meaning should have the _same_ translation,
|
While all appearance of a message with the _same_ meaning should have the _same_ translation,
|
||||||
a message with *different meanings* could have different translations.
|
a message with *different meanings* could have different translations.
|
||||||
The Angular extraction tool preserves both the _meaning_ and the _description_ in the translation source file
|
The Angular extraction tool preserves both the _meaning_ and the _description_ in the translation source file
|
||||||
to facilitiate contextually-specific transations.
|
to facilitiate contextually-specific translations.
|
||||||
|
|
||||||
a#ng-xi18n
|
a#ng-xi18n
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Extract translatable text with the _ng-xi18n_ command
|
## Create a translation source file with the _ng-xi18n_ tool
|
||||||
|
|
||||||
Use the `ng-xi18n` extraction tool to generate a translation source file in an industry standard format.
|
Use the `ng-xi18n` extraction tool to extract the `i18n`-marked texts
|
||||||
|
into a translation source file in an industry standard format.
|
||||||
|
|
||||||
This is an Angular CLI tool based on the `ngc` compiler in the `@angular/compiler-cli` npm package.
|
This is an Angular CLI tool in the `@angular/compiler-cli` npm package.
|
||||||
If you haven't already installed the CLI and its `platform-server` peer dependency, do so now:
|
If you haven't already installed the CLI and its `platform-server` peer dependency, do so now:
|
||||||
|
|
||||||
code-example(language="sh" class="code-shell").
|
code-example(language="sh" class="code-shell").
|
||||||
|
@ -151,18 +155,26 @@ a#translate
|
||||||
The next step is to translate the English language template text into the specific language translation
|
The next step is to translate the English language template text into the specific language translation
|
||||||
files. The cookbook sample creates a French translation file.
|
files. The cookbook sample creates a French translation file.
|
||||||
|
|
||||||
a#i18n-file-structure
|
a#localization-folder
|
||||||
:marked
|
:marked
|
||||||
### Create an i18n project structure
|
### Create a localization folder
|
||||||
|
|
||||||
You will probably translate into more than one other language so it's a good idea
|
You will probably translate into more than one other language so it's a good idea
|
||||||
for the project structure to reflect your entire internationalization effort.
|
for the project structure to reflect your entire internationalization effort.
|
||||||
|
|
||||||
One approach is to create an `i18n` folder with subfolders for each language or locale, e.g. `i18n/fr` for French.
|
One approach is to dedicate a folder to localization and store related assets
|
||||||
This sample puts `i18n/fr` under the project root.
|
(e.g. internationalization files) there.
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Localization and internationalization are
|
||||||
|
<a href="" target="_blank">different but closely related terms</a>.
|
||||||
|
:marked
|
||||||
|
This sample follows that suggestion. It has `locale` folder immediately under the project root.
|
||||||
|
Assets within the folder carry a filename extension that matches a language-culture code from a
|
||||||
|
<a href="https://msdn.microsoft.com/en-us/library/ee825488(v=cs.20).aspx" target="_blank">well-known codeset</a>.
|
||||||
|
|
||||||
Move the `messages.xlf` into the `i18n` folder where it will become the source for all language-specific translations.
|
Move `messages.xlf` into the `locale` folder where it will become the source for all language-specific translations.
|
||||||
Then copy `messages.xlf` into `i18n/fr` and rename it as `messages.fr.xlf` .
|
Then make a copy for the French language named `messages.fr.xlf` .
|
||||||
|
|
||||||
Follow the same convention for each target language.
|
Follow the same convention for each target language.
|
||||||
|
|
||||||
|
@ -174,17 +186,17 @@ a#i18n-file-structure
|
||||||
This sample file is easy to translate without a special editor or knowledge of French.
|
This sample file is easy to translate without a special editor or knowledge of French.
|
||||||
Open `messages.fr.xlf` and find the `<trans-unit>` section:
|
Open `messages.fr.xlf` and find the `<trans-unit>` section:
|
||||||
|
|
||||||
+makeExample('cb-i18n/ts/i18n/trans-unit.html', '', 'i18n/messages.fr.xlf (<trans-unit>)')(format=".")
|
+makeExample('cb-i18n/ts/locale/trans-unit.html', '', 'locale/messages.fr.xlf (<trans-unit>)')(format=".")
|
||||||
:marked
|
:marked
|
||||||
This XML element represents the translation of the `<h1>` greeting tag you marked with the `i18n` attribute.
|
This XML element represents the translation of the `<h1>` greeting tag you marked with the `i18n` attribute.
|
||||||
|
|
||||||
Using the _source_, _description_, and _meaning_ elements to guide your translation,
|
Using the _source_, _description_, and _meaning_ elements to guide your translation,
|
||||||
replace the `<target/>` tag with the French greeting:
|
replace the `<target/>` tag with the French greeting:
|
||||||
+makeExample('cb-i18n/ts/i18n/fr/messages.fr.xlf.html', 'trans-unit', 'i18n/fr/messages.fr.xlf (<trans-unit>, after translation)')(format=".")
|
+makeExample('cb-i18n/ts/locale/messages.fr.xlf.html', 'trans-unit', 'locale/messages.fr.xlf (<trans-unit>, after translation)')(format=".")
|
||||||
:marked
|
:marked
|
||||||
Note that the `id` is generated by the tool. Don't touch it.
|
Note that the `id` is generated by the tool. Don't touch it.
|
||||||
Its value depends on the content of the message, its meaning, and its description.
|
Its value depends on the content of the message and its assigned meaning.
|
||||||
Change any of these factors and the `id` changes as well.
|
Change either factor and the `id` changes as well.
|
||||||
.alert.is-helpful
|
.alert.is-helpful
|
||||||
:marked
|
:marked
|
||||||
Repeat the extraction process whenever you add new app messages or edit existing ones.
|
Repeat the extraction process whenever you add new app messages or edit existing ones.
|
||||||
|
@ -202,19 +214,19 @@ a#i18n-file-structure
|
||||||
cb-i18n/ts/app/app.component.ts,
|
cb-i18n/ts/app/app.component.ts,
|
||||||
cb-i18n/ts/app/app.module.ts,
|
cb-i18n/ts/app/app.module.ts,
|
||||||
cb-i18n/ts/app/main.1.ts,
|
cb-i18n/ts/app/main.1.ts,
|
||||||
cb-i18n/ts/i18n/fr/messages.fr.xlf.html
|
cb-i18n/ts/locale/messages.fr.xlf.html
|
||||||
`, '', `
|
`, '', `
|
||||||
app/app.component.html,
|
app/app.component.html,
|
||||||
app/app.component.ts,
|
app/app.component.ts,
|
||||||
app/app.module.ts,
|
app/app.module.ts,
|
||||||
app/main.ts,
|
app/main.ts,
|
||||||
i18n/fr/messages.fr.xlf
|
locale/messages.fr.xlf
|
||||||
`)
|
`)
|
||||||
|
|
||||||
a#merge
|
a#merge
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Merge the translation file
|
## Merge the completed translation file
|
||||||
|
|
||||||
To merge the translated text into component templates,
|
To merge the translated text into component templates,
|
||||||
you compile the application with the completed translation file.
|
you compile the application with the completed translation file.
|
||||||
|
@ -224,7 +236,8 @@ a#merge
|
||||||
You provide the Angular compiler with three new pieces of information:
|
You provide the Angular compiler with three new pieces of information:
|
||||||
* the translation file
|
* the translation file
|
||||||
* the translation file format
|
* the translation file format
|
||||||
* the _Locale ID_ (`en-US` for instance)
|
* the <a href="https://en.wikipedia.org/wiki/XLIFF" target="_blank">_Locale ID_</a>
|
||||||
|
(`fr` or `en-US` for instance)
|
||||||
|
|
||||||
_How_ you provide this information depends upon whether you compile with
|
_How_ you provide this information depends upon whether you compile with
|
||||||
the JiT (_Just-in-Time_) compiler or the AoT (_Ahead-of-Time_) compiler.
|
the JiT (_Just-in-Time_) compiler or the AoT (_Ahead-of-Time_) compiler.
|
||||||
|
@ -280,12 +293,12 @@ a#text-plugin
|
||||||
:marked
|
:marked
|
||||||
* It gets the locale from the global `document.locale` variable that was set in `index.html`.
|
* It gets the locale from the global `document.locale` variable that was set in `index.html`.
|
||||||
|
|
||||||
* If there is no locale or the language is English, there is no need to translate.
|
* If there is no locale or the language is U.S. English (`en-US`), there is no need to translate.
|
||||||
The function returns an empty `noProviders` array as a `Promise`.
|
The function returns an empty `noProviders` array as a `Promise`.
|
||||||
It must return a `Promise` because this function could read a translation file asynchronously from the server.
|
It must return a `Promise` because this function could read a translation file asynchronously from the server.
|
||||||
|
|
||||||
* It creates a transaction filename from the locale according to the name and location convention
|
* It creates a transaction filename from the locale according to the name and location convention
|
||||||
[described earlier](#i18n-file-structure).
|
[described earlier](#localization-folder).
|
||||||
|
|
||||||
* The `getTranslationsWithSystemJs` method reads the translation and returns the contents as a string.
|
* The `getTranslationsWithSystemJs` method reads the translation and returns the contents as a string.
|
||||||
Notice that it appends `!text` to the filename, telling SystemJS to use the [text plugin](#text-plugin).
|
Notice that it appends `!text` to the filename, telling SystemJS to use the [text plugin](#text-plugin).
|
||||||
|
@ -341,10 +354,10 @@ a#aot
|
||||||
|
|
||||||
For this sample, the French language command would be
|
For this sample, the French language command would be
|
||||||
code-example(language="sh" class="code-shell").
|
code-example(language="sh" class="code-shell").
|
||||||
./node_modules/.bin/ngc --i18nFile=./i18n/fr/messages.fr.xlf --locale=fr --i18nFormat=xlf
|
./node_modules/.bin/ngc --i18nFile=./locale/messages.fr.xlf --locale=fr --i18nFormat=xlf
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Windows users may have to quote the command:
|
Windows users may have to quote the command:
|
||||||
code-example(language="sh" class="code-shell").
|
code-example(language="sh" class="code-shell").
|
||||||
"./node_modules/.bin/ngc" --i18nFile=./i18n/fr/messages.fr.xlf --locale=fr --i18nFormat=xlf
|
"./node_modules/.bin/ngc" --i18nFile=./locale/messages.fr.xlf --locale=fr --i18nFormat=xlf
|
||||||
|
|
Loading…
Reference in New Issue