New Transloco approach:
Summary:
Migrate from ngx-translate to Transloco script:
ng g @ngneat/transloco:migrate
Links:
Popular ngx-translate approach:
Summary:
- http://www.ngx-translate.com/
- https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate
Official Angular i18n approach:
Summary:
- Complex to setup: separate build per every language in production
- Complex in development: separate local server instance per every language
- Run command to extract language strings
Run CLI command:
ng add @angular/localize
Add i18n attr:
<h1 i18n="@@introHeader"> Hello i18n! </h1> <ng-container i18n="@@introDesc">I don't output any element</ng-container>
Run this CLI command to extract the source language file:
ng extract-i18n --output-path src/locale
Copy file src/locale/messages.xlf into src/locale/messages.fr.xlf.
Also add "target" for every "source" with French translation inside messages.fr.xlf:
<source>Homepage</source> <target>Page d'accueil</target>
Angular.json update:
"projects": {
"project-name": {
"i18n": {
"sourceLocale": "en",
"locales": {
"fr": {
"translation": "src/locale/messages.fr.xlf",
"baseHref": ""
}
}
},
"architect": {
"build": {
"options": {
"localize": true,
"aot": true,
},
"configurations": {
"production": {},
"en": {
"localize": ["en"],
"main": "src/main.ts"
},
"fr": {
"localize": ["fr"],
"main": "src/main.ts"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "project-name:build"
},
"configurations": {
"production": {
"browserTarget": "project-name:build:production"
},
"en": {
"browserTarget": "project-name:build:en"
},
"fr": {
"browserTarget": "project-name:build:fr"
}
}
},
}
}
}
Serve English localized page locally via http://localhost:420/:
ng serve --configuration=en
Serve French localized page locally via http://localhost:4201/:
ng serve --configuration=fr --port 4201