Goal
To render and deploy our Angular app in 3 languages:
- English (will be generated by default, no setup required)
- French
- Spanish
Setup
Assuming that you already have an Angular project, follow these steps:
- Add localisation package with
ng add @angular/localize - Add the following scripts to
package.json:
"scripts": {
...
"start": "ng serve",
"build": "ng build --prod",
"extract": "ng xi18n --output-path=src/locale",
"start:fr": "npm start -- --configuration=fr --port 4201",
"start:es": "npm start -- --configuration=es --port 4202",
"build:i18n": "npm run build -- --localize"
},
- Add the
i18nattribute with[title] | [description] @@[tag]to all hardcoded strings which you'd like to be translated, like this :
<h1 i18n="Profile page title | A title for the Profile page @@profilePageTitle">
Profile
</h1>
- Run
npm run extractto extract the language translation file atsrc/locale/messages.xlf. It will look like this :
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en-US" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="profilePageTitle" datatype="html">
<source>Profile</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/profile-settings/profile-settings.component.html</context>
<context context-type="linenumber">4</context>
</context-group>
<note priority="1" from="description"> A title for the Profile page </note>
<note priority="1" from="meaning">Profile page title </note>
</trans-unit>
</body>
</file>
</xliff>
- Create a copy of this file and rename these 2 as :
-
messages.fr.xlf(for French translations) -
messages.es.xlf(for Spanish translations)
-
- Modify the
projectssectionangular.jsonin the following way to build and serve the different language builds:
"projects": {
"<your-project-name>": {
...
"architect": {
"build": {
...
"configurations": {
...
"fr": {
"localize": ["fr"]
},
"es": {
"localize": ["es"]
}
}
},
"serve": {
...
"configurations": {
...
"fr": {
"browserTarget": "<your-project-name>:build:fr"
},
"es": {
"browserTarget": "<your-project-name>:build:es"
}
}
},
...
},
"i18n": {
"locales": {
"fr": "src/locale/messages.fr.xlf",
"es": "src/locale/messages.es.xlf"
}
}
}
},
- Add translations of the targeted word "Profile" in the translation files in their respective languages with the
<target>tag :
<!-- messages.fr.xlf -->
<source>Profile</source>
<target>Profil</target>
<!-- messages.es.xlf -->
<source>Profile</source>
<target>Perfil</target>
- Check if the translations are working by running
-
npm run startorng servefor English (default) -
npm run start:frorng serve -c=frfor French -
npm run start:esorng serve -c=esfor Spanish
-
- Build the app for all languages by running
npm run build:i18norng build --prod --localize. It will create 3 build folders underdist/<your-project-name>:- en-US
- fr
- es
- Deploy folder
dist/<your-project-name>to any static hosting services (like Firebase). Your sites will be available at-
https://your.site/en-US/(English) -
https://your.site/fr/(French) -
https://your.site/es/(Spanish)
-
Switch between the sites from inside the app
Create a switch-language component with a dropdown listing all the languages offered. On selection of any language, redirect the user to the corresponding site.
Additionally, hide the component if you're in development mode.
import { Component, OnInit, isDevMode } from '@angular/core'
@Component({
selector: 'app-switch-language',
template: `
<select
*ngIf="!isDev"
[(ngModel)]="siteLocale"
#language
(change)="onChange(language.value)"
>
<option *ngFor="let lang of languageList" [value]="lang.code">
{{ lang.label }}
</option>
</select>
`,
})
export class SwitchLanguageComponent implements OnInit {
isDev = isDevMode()
siteLanguage: string
siteLocale: string
languageList = [
{ code: 'en-US', label: 'English' },
{ code: 'fr', label: 'French' },
{ code: 'es', label: 'Spanish' },
]
ngOnInit() {
this.siteLocale = window.location.pathname.split('/')[1]
this.siteLanguage = this.languageList.find(
(f) => f.code === this.siteLocale
)?.label
if (!this.siteLanguage) {
this.onChange(this.languageList[0].code)
}
}
onChange(selectedLangCode: string) {
window.location.href = `/${selectedLangCode}`
}
}
Top comments (0)