Skip to content

Commit 99a4409

Browse files
committed
docs: add i18n story
1 parent cbab6f8 commit 99a4409

File tree

1 file changed

+73
-0
lines changed

1 file changed

+73
-0
lines changed

docs/documentation/stories/i18n.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# Internationalization (i18n)
2+
3+
## Extract messages
4+
5+
First, you have to edit your `src/tsconfig.js` file to exclude the `test.ts` file from compilation, and to specify an output directory where your translations files will be extracted:
6+
7+
```json
8+
{
9+
"compilerOptions": {
10+
...
11+
},
12+
"exclude": [ "test.ts" ],
13+
"angularCompilerOptions": {
14+
"genDir": "i18n"
15+
}
16+
}
17+
```
18+
19+
You can now extract the i18n-marked texts with the following command:
20+
21+
```bash
22+
$ cd src && ../node_modules/.bin/ng-x18n
23+
```
24+
25+
Alternatively, you can add a script definition to your `package.json` file:
26+
27+
```json
28+
{
29+
...
30+
"scripts": {
31+
...
32+
"xi18n": "cd src && ng-xi18n"
33+
},
34+
...
35+
}
36+
```
37+
38+
This way, you can now execute the extraction process with this simple command:
39+
40+
```bash
41+
$ npm run xi18n
42+
```
43+
44+
After this extraction process, you will find a `messages.xlf` file in the `src/i18n` directory (or any other directory specified in the `angularCompilerOptions/genDir` option above).
45+
46+
You can copy this source file to language-specific files, for example `src/i18n/messages.en.xlf` and `src/i18n/messages.fr.xlf`.
47+
48+
49+
## Serve with AOT compilation
50+
51+
When serving your app with AOT compilation, you can specify the language-specific file that you want to use:
52+
53+
```bash
54+
$ ng serve --aot \
55+
--i18n-file=src/i18n/messages.fr.xlf \
56+
--locale=fr
57+
```
58+
59+
60+
## AOT build
61+
62+
When building your app with AOT compilation, you can specify the language-specific file to use and a specific output path, to be able to build the different packs for the different languages:
63+
64+
```bash
65+
$ ng build --aot \
66+
--output-path=dist/fr \
67+
--i18n-file=src/i18n/messages.fr.xlf \
68+
--locale=fr
69+
$ ng build --aot \
70+
--output-path=dist/en \
71+
--i18n-file=src/i18n/messages.en.xlf \
72+
--locale=en
73+
```

0 commit comments

Comments
 (0)