docs: update intl wiki

This commit is contained in:
Filipe Silva 2018-04-30 12:35:26 -07:00 committed by Hans
parent d048bfb80a
commit c06f202a0b

View File

@ -21,21 +21,52 @@ For example to create a file in the `src/locale` folder you would use:
ng xi18n --output-path src/locale ng xi18n --output-path src/locale
``` ```
### Serve ### Building and serving
Now that you have generated a messages bundle source file, you can translate it. Now that you have generated a messages bundle source file, you can translate it.
Let's say that your file containing the french translations is named `messages.fr.xlf` Let's say that your file containing the french translations is named `messages.fr.xlf`
and is located in the `src/locale` folder. and is located in the `src/locale` folder.
If you want to use it when you serve your application you can use the 4 following commands:
- `--i18n-file` Localization file to use for i18n.
- `--i18n-format` Format of the localization file specified with --i18n-file.
- `--locale` Locale to use for i18n.
- `--missing-translation` Defines the strategy to use for missing i18n translations.
In our case we can load the french translations with the following command: If you want to use it when you serve your application you can use the 4 following options:
```sh - `i18nFile` Localization file to use for i18n.
ng serve --aot --locale fr --i18n-format xlf --i18n-file src/locale/messages.fr.xlf --missing-translation error - `i18nFormat` Format of the localization file specified with --i18n-file.
- `i18nLocale` Locale to use for i18n.
- `i18nMissingTranslation` Defines the strategy to use for missing i18n translations.
In our case we can load the french translations with the following configuration:
```json
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": { ... },
"configurations": {
"fr": {
"aot": true,
"outputPath": "dist/my-project-fr/",
"i18nFile": "src/locale/messages.fr.xlf",
"i18nFormat": "xlf",
"i18nLocale": "fr",
"i18nMissingTranslation": "error",
}
// ...
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-project-name:build"
},
"configurations": {
"production": {
"browserTarget": "your-project-name:build:production"
},
"fr": {
"browserTarget": "your-project-name:build:fr"
}
}
},
``` ```
To build the application using the French i18n options, use `ng build --configuration=fr`.
To serve, use `ng serve --configuration=fr`.
Our application is exactly the same but the `LOCALE_ID` has been provided with "fr", Our application is exactly the same but the `LOCALE_ID` has been provided with "fr",
`TRANSLATIONS_FORMAT` with "xlf" and `TRANSLATIONS` with the content of `messages.fr.xlf`. `TRANSLATIONS_FORMAT` with "xlf" and `TRANSLATIONS` with the content of `messages.fr.xlf`.
All the strings flagged for i18n have been replaced with their french translations. All the strings flagged for i18n have been replaced with their french translations.
@ -43,28 +74,28 @@ All the strings flagged for i18n have been replaced with their french translatio
Note: this only works for AOT, if you want to use i18n in JIT you will have to update Note: this only works for AOT, if you want to use i18n in JIT you will have to update
your bootstrap file yourself. your bootstrap file yourself.
### Build ### Using multiple languages
To build your application with a specific locale you can use the exact same commands
that you used for `serve`:
```sh
ng build --aot --locale fr --i18n-format xlf --i18n-file src/locale/messages.fr.xlf --missing-translation error
```
When you build your application for a specific locale, it is probably a good idea to change When you build your application for a specific locale, it is probably a good idea to change
the output path with the command `--output-path` in order to save the files to a different location. the output path with the `outputPath` options in order to save the files to a different location.
```sh
ng build --aot --output-path dist/fr --locale fr --i18n-format xlf --i18n-file src/locale/messages.fr.xlf --missing-translation error
```
If you end up serving this specific version from a subdirectory, you can also change If you end up serving this specific version from a subdirectory, you can also change
the base url used by your application with the command `--base-href`. the base url used by your application with the `baseHref` option.
For example if the french version of your application is served from https://myapp.com/fr/ For example if the french version of your application is served from https://myapp.com/fr/
then you would build the french version like this: then you would build the french version like this:
```sh ```json
ng build --aot --output-path dist/fr --base-href /fr/ --locale fr --i18n-format xlf --i18n-file src/locale/messages.fr.xlf --missing-translation error "configurations": {
"fr": {
"aot": true,
"outputPath": "dist/my-project-fr/",
"baseHref": "/fr/",
"i18nFile": "src/locale/messages.fr.xlf",
"i18nFormat": "xlf",
"i18nLocale": "fr",
"i18nMissingTranslation": "error",
}
``` ```
If you need more details about how to create scripts to generate the app in multiple If you need more details about how to create scripts to generate the app in multiple