I'm trying to make my app available in multiple languages and I'm following Angular's i18n guide. The default locale is en-US and there is also a French fr and a Spanish es translation.
This works fine, when running the app using ng serve --configuration=fr for example.
Now I'm at the point, where I want to build the app. I'm using this command:
ng build --prod --build-optimizer --i18n-file src/locale/messages.es.xlf --i18n-format xlf --i18n-locale es
And I've updated angular.json like explained in the guide as well:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/myapp",
},
"configurations": {
"production": {
"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
},
"es": {
"aot": true,
"outputPath": "dist/myapp/es",
"baseHref": "/es/",
"i18nFile": "src/locale/messages.es.xlf",
"i18nFormat": "xlf",
"i18nLocale": "es",
"i18nMissingTranslation": "error"
},
"fr": {
"aot": true,
"outputPath": "dist/myapp/fr",
"baseHref": "/fr/",
"i18nFile": "src/locale/messages.fr.xlf",
"i18nFormat": "xlf",
"i18nLocale": "fr",
"i18nMissingTranslation": "error"
}
}
},
The build process works, and I get a translated version of the app.
Unfortunately, a few things don't work:
1.)
The app is always build into dist/myapp and not in dist/myapp/fr or dist/myapp/es.
2.)
The baseHref-parameter is not used, so I can't simply move the build into a subdirectory, like /dist/fr.
To make it more clear, after running build I want a folder structure like this:
/dist/en
/dist/fr
/dist/es
And when dist is my webroot, it should be possible to access these routes in the browser:
/en
/fr
/es
3.)
Finally the lang-attribute ist not set correctly. index.html is not changed, an will always show:
<html lang="en">
instead of <html lang="es"> or <html lang="fr">.
What is missing to make this work correctly?
from How to correctly build an Angular 6 app with i18n into a "locale directory" with baseHref?
No comments:
Post a Comment