cargdev/angular
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

docs(aio): Update i18n example to Angular V6 (#23660)

Browse Source 
PR Close #23660
This commit is contained in:
Brandon Roberts
2018-05-02 23:16:03 -05:00
committed by Igor Minar
parent fc034270ce
commit 9e2d87f5b8
9 changed files with 438 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
aio/content/examples/.DS_Store vendored
View File

Binary file not shown.

103
aio/content/guide/i18n.md
View File

@ -42,11 +42,10 @@ locale id to find the correct corresponding locale data.
By default, Angular uses the locale `en-US`, which is English as spoken in the United States of America.
To set your app's locale to another value, use the CLI parameter `--locale` with the value
of the locale id that you want to use:
To set your app's locale to another value, use the CLI parameter `--configuration` with the value of the locale id that you want to use:
<code-example language="sh" class="code-shell">
ng serve --aot --locale fr
ng serve --configuration=fr
</code-example>
If you use JIT, you also need to define the `LOCALE_ID` provider in your main module:
@ -86,7 +85,7 @@ and `PercentPipe` use locale data to format data based on the `LOCALE_ID`.
By default, Angular only contains locale data for `en-US`. If you set the value of
`LOCALE_ID` to another locale, you must import locale data for that new locale.
The CLI imports the locale data for you when you use the parameter `--locale` with `ng serve` and
The CLI imports the locale data for you when you use the parameter `--configuration` with `ng serve` and
`ng build`.
If you want to import locale data for other languages, you can do it manually:
@ -424,9 +423,9 @@ You can specify the translation format explicitly with the `--i18nFormat` flag a
these example commands:
<code-example language="sh" class="code-shell">
ng xi18n --i18nFormat=xlf
ng xi18n --i18nFormat=xlf2
ng xi18n --i18nFormat=xmb
ng xi18n --i18n-format=xlf
ng xi18n --i18n-format=xlf2
ng xi18n --i18n-format=xmb
</code-example>
The sample in this guide uses the default XLIFF 1.2 format.
@ -442,11 +441,11 @@ The sample in this guide uses the default XLIFF 1.2 format.
### Other options
You can specify the output path used by the CLI to extract your translation source file with
the parameter `--outputPath`:
the parameter `--output-path`:
<code-example language="sh" class="code-shell">
ng xi18n --outputPath src/locale
ng xi18n --output-path locale
</code-example>
@ -455,15 +454,15 @@ the parameter `--outFile`:
<code-example language="sh" class="code-shell">
ng xi18n --outFile source.xlf
ng xi18n --out-file source.xlf
</code-example>
You can specify the base locale of your app with the parameter `--locale`:
You can specify the base locale of your app with the parameter `--i18n-locale`:
<code-example language="sh" class="code-shell">
ng xi18n --locale fr
ng xi18n --i18n-locale fr
</code-example>
@ -663,7 +662,7 @@ format that Angular understands, such as `.xtb`.
How you provide this information depends upon whether you compile with
the JIT compiler or the AOT compiler.
* With [AOT](guide/i18n#merge-aot), you pass the information as a CLI parameter.
* With [AOT](guide/i18n#merge-aot), you pass the information as a configuration
* With [JIT](guide/i18n#merge-jit), you provide the information at bootstrap time.
@ -677,18 +676,67 @@ When you internationalize with the AOT compiler, you must pre-build a separate a
package for each language and serve the appropriate package based on either server-side language
detection or url parameters.
You also need to instruct the AOT compiler to use your translation file. To do so, you use three
options with the `ng serve` or `ng build` commands:
You also need to instruct the AOT compiler to use your translation configuration. To do so, you configure the translation with three options in your `angular.json` file.
* `--i18nFile`: the path to the translation file.
* `--i18nFormat`: the format of the translation file.
* `--locale`: the locale id.
* `i18nFile`: the path to the translation file.
* `i18nFormat`: the format of the translation file.
* `i18nLocale`: the locale id.
The example below shows how to serve the French language file created in previous sections of this
guide:
<code-example format="." language="ts">
"configurations": {
...
"fr": {
"aot": true,
"outputPath": "dist/my-project-fr/",
"i18nFile": "src/locale/messages.fr.xlf",
"i18nFormat": "xlf",
"i18nLocale": "fr",
...
}
}
</code-example>
You then pass the configuration with the `ng serve` or `ng build` commands. The example below shows how to serve the French language file created in previous sections of this guide:
<code-example language="sh" class="code-shell">
ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr
ng serve --configuration=fr
</code-example>
For production builds, you define a separate `production-fr` build configuration in your `angular.json`.
<code-example format="." language="ts">
"configurations": {
...
"production-fr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"outputPath": "dist/my-project-fr/",
"i18nFile": "src/locale/messages.fr.xlf",
"i18nFormat": "xlf",
"i18nLocale": "fr",
"i18nMissingTranslation": "error"
},
...
}
</code-example>
The same configuration options can also be provided through the CLI with your existing `production` configuration.
<code-example language="sh" class="code-shell">
ng build --prod --i18n-file src/locale/messages.fr.xlf --i18n-format xlf --i18n-locale fr
</code-example>
{@a merge-jit}
@ -731,11 +779,16 @@ compilation, the app will fail to load.
* Warning (default): show a 'Missing translation' warning in the console or shell.
* Ignore: do nothing.
If you use the AOT compiler, specify the warning level by using the CLI parameter
`--missingTranslation`. The example below shows how to set the warning level to error:
You specify the warning level in the `configurations` section your Angular CLI build configuration. The example below shows how to set the warning level to error:
<code-example language="sh" class="code-shell">
ng serve --aot --missingTranslation=error
<code-example format="." language="ts">
"configurations": {
...
"fr": {
...
"i18nMissingTranslation": "error"
}
}
</code-example>
If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding