Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(i18n): incorporate corrections and feedback from Victor Berchet #2517

Merged
merged 1 commit into from
Oct 1, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions public/docs/_examples/cb-i18n/ts/app/i18n-providers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ export function getTranslationProviders(): Promise<Object[]> {
// return no providers if fail to get translation file for locale
const noProviders: Object[] = [];

// No locale or English: no translation providers
if (!locale || locale === 'en') {
// No locale or U.S. English: no translation providers
if (!locale || locale === 'en-US') {
return Promise.resolve(noProviders);
}

// Ex: 'i18n/fr/messages.fr.xlf`
const translationFile = `./i18n/${locale}/messages.${locale}.xlf`;
// Ex: 'locale/messages.fr.xlf`
const translationFile = `./locale/messages.${locale}.xlf`;

return getTranslationsWithSystemJs(translationFile)
.then( (translations: string ) => [
Expand Down
4 changes: 2 additions & 2 deletions public/docs/_examples/cb-i18n/ts/plnkr.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
"app/**/*.css",
"app/**/*.html",
"app/**/*.ts",
"i18n/messages.xlf",
"i18n/fr/messages.fr.xlf",
"locale/messages.xlf",
"locale/messages.fr.xlf",

"!**/*.[1].*",

Expand Down
Binary file not shown.
65 changes: 39 additions & 26 deletions public/docs/ts/latest/cookbook/i18n.jade
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
include ../_util-fns

: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>
## Table of contents

* [Angular and i18n template translation](#angular-i18n)
* [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)
* [Merge the translation file into the app](#merge)
* [Merge the completed translation file into the app](#merge)
* [JiT configuration](#jit)
* [AoT configuration](#aot)

Expand All @@ -30,6 +30,7 @@ a#angular-i18n
This page describes the _i18n_ tools to assist translation of component template text
into multiple languages.


.l-sub-section
:marked
Practitioners of _internationalization_ refer to a translatable text as a "_message_".
Expand Down Expand Up @@ -61,7 +62,9 @@ a#i18n-attribute

.alert.is-helpful
: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
In the accompanying sample, an `<h1>` tag displays a simple English language greeting which you will translate to French:
Expand All @@ -87,16 +90,17 @@ a#i18n-attribute
While all appearance of a message with the _same_ meaning should have the _same_ translation,
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
to facilitiate contextually-specific transations.
to facilitiate contextually-specific translations.

a#ng-xi18n
.l-main-section
: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:

code-example(language="sh" class="code-shell").
Expand Down Expand Up @@ -151,18 +155,26 @@ a#translate
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.

a#i18n-file-structure
a#localization-folder
: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
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.
This sample puts `i18n/fr` under the project root.
One approach is to dedicate a folder to localization and store related assets
(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.
Then copy `messages.xlf` into `i18n/fr` and rename it as `messages.fr.xlf` .
Move `messages.xlf` into the `locale` folder where it will become the source for all language-specific translations.
Then make a copy for the French language named `messages.fr.xlf` .

Follow the same convention for each target language.

Expand All @@ -174,17 +186,17 @@ a#i18n-file-structure
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:

+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
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,
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
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.
Change any of these factors and the `id` changes as well.
Its value depends on the content of the message and its assigned meaning.
Change either factor and the `id` changes as well.
.alert.is-helpful
:marked
Repeat the extraction process whenever you add new app messages or edit existing ones.
Expand All @@ -202,19 +214,19 @@ a#i18n-file-structure
cb-i18n/ts/app/app.component.ts,
cb-i18n/ts/app/app.module.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.ts,
app/app.module.ts,
app/main.ts,
i18n/fr/messages.fr.xlf
locale/messages.fr.xlf
`)

a#merge
.l-main-section
:marked
## Merge the translation file
## Merge the completed translation file

To merge the translated text into component templates,
you compile the application with the completed translation file.
Expand All @@ -224,7 +236,8 @@ a#merge
You provide the Angular compiler with three new pieces of information:
* the translation file
* 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
the JiT (_Just-in-Time_) compiler or the AoT (_Ahead-of-Time_) compiler.
Expand Down Expand Up @@ -280,12 +293,12 @@ a#text-plugin
:marked
* 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`.
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
[described earlier](#i18n-file-structure).
[described earlier](#localization-folder).

* 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).
Expand Down Expand Up @@ -341,10 +354,10 @@ a#aot

For this sample, the French language command would be
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
:marked
Windows users may have to quote the command:
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