Menu
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/myapp/fr.
To make it more clear, after running build I want a folder structure like this:
/dist/myapp/en
/dist/myapp/fr
/dist/myapp/es
And when myapp 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?
875
How to Use Angular’s i18n Module? To begin with, we first install the i18n module. we do this with this command: - npm install i18n — save Next, we configure a file for i8n. We can do this in angular.json. In configurations, we define many things like output path, i18n file, i18n locale, etc.
If you set the "localize" option in angular.json workspace build configuration file to true or to an array of locale IDs, the CLI adjusts the base href for each version of the application. To adjust the base href for each version of the application, the CLI adds the locale to the configured "baseHref" .
That's our Node and NPM versions, let's move to the main steps of the Angular 6 web application tutorial. To install or upgrade the latest Angular 6 CLI, type this command in the terminal or Node command line. If you use windows, it might be not necessary to add `sudo`. Next, create a new Angular 6 Web Application using this Angular CLI command.
To install or upgrade the latest Angular 6 CLI, type this command in the terminal or Node command line. If you use windows, it might be not necessary to add `sudo`. Next, create a new Angular 6 Web Application using this Angular CLI command. Next, go to the newly created Angular 6 project folder.
You need to pass the correct configuration when doing the build. Otherwise, it'll just use the production configuration
You'll actually need to do one build for each language.
ng build --configuration=fr
ng build --configuration=en
ng build --configuration=es
You can either specify for each configuration which options to use (aot, output hashing,...) or you could put it in the options setting inside the build
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/myapp",
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
As for changing the lang attribute, according to this github issue, you have to do it manually
export class AppComponent {
constructor(@Inject(DOCUMENT) doc: Document, @Inject(LOCALE_ID) locale: string, renderer: Renderer2) {
renderer.setAttribute(doc.documentElement, 'lang', locale);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
