Angular Localization: Implementing Multi-Language Support in Your Application
Introduction:
Thorough manual design to assist developers in adding multilingual support to Angular apps is called Angular Localization. With the help of this Blog, you will be able to show content in different languages by using the i18n library in your Angular project. This blog covers all the steps to make your Angular project work properly without any error, from setting up the json files and translated language files.
Setting up the Angular Project:
1. Install Angular:
- Install Angular by using command.
'npm install -g @angular/cli'
2. Create new Angular project:
'ng new i18n-localize'
3. Run the application using command:
'ng serve --open'
Configuring Localization:
1. Install a localize package:
- After you’ve made sure everything is working, stop the server and install a localized package.
- This package will add internationalization support to the project.
- Install by running a command.
‘ng add @angular/localize’
2. Next We’ll need to modify it in the angular.json file. add relevant lines here:
- See highlighted part of code.
// <-- means (The given number shows the steps should be edited in your project)
xxxxxxxxxx{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "i18n-localize": { "projectType": "application", . . . "i18n": { // <--1 "sourceLocale": "en-US", // <-- 2 "locales": { // <-- 3 "ru": { // <-- 4 for Russian language "translation": "src/locale/messages.ru.xlf” }, // <-- 5 "fr": { // <--6 for French language "translation": "src/locale/messages.fr.xlf" // <-- 7 }, "hi": { // <-- 8 for Hindi language "translation": "src/locale/messages.hi.xlf” } // <-- 9 } }, "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "localize": true, // <-- 10 "i18nMissingTranslation": "error", // <-- 11xxxxxxxxxx{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "i18n-localize": { "projectType": "application", . . . "i18n": { // <--1 "sourceLocale": "en-US", // <-- 2 "locales": { // <-- 3 "ru": { // <-- 4 for Russian language "translation": "src/locale/messages.ru.xlf” }, // <-- 5 "fr": { // <--6 for French language "translation": "src/locale/messages.fr.xlf" // <-- 7 }, "hi": { // <-- 8 for Hindi language "translation": "src/locale/messages.hi.xlf” } // <-- 9 } }, "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "localize": true, // <-- 10 "i18nMissingTranslation": "error", // <-- 11Changes we done in the above angular.json file.
- Adding the ‘i18n’ section, under the project configuration.
- Setting the source of the application to ‘en-US’.
- Adding support for other locales.
- If you would like to translate the app into Russian use ‘ru’ locale. You can add other language locales also like ‘fr’ for French, ‘hi’ for Hindi.
- Set ‘localize’ to ‘true’ to generate application variants for each locale.
3. Write a code in component.html file:
- Replace the content with the following line of code.
- i18n is an attribute of the localize package, and the tag content will be replaced with the proper translation. The attribute contain translation metadata like:
- Also you can use pipe to describe the heading and description separately.
xxxxxxxxxx<h1 i18n>Angular Localization: Implementing Multi-Language Support in Your Application</h1>xxxxxxxxxx<h1 i18n>Angular Localization: Implementing Multi-Language Support in Your Application</h1>xxxxxxxxxx<h1 i18n=“Friendly welcoming message”>Angular Localization: Implementing Multi-Language Support in Your Application</h1>xxxxxxxxxx<h1 i18n=“Friendly welcoming message”>Angular Localization: Implementing Multi-Language Support in Your Application</h1>xxxxxxxxxx<h1 i18n=“main header | Friendly welcoming message”>Angular Localization: Implementing Multi-Language Support in Your Application</h1>xxxxxxxxxx<h1 i18n=“main header | Friendly welcoming message”>Angular Localization: Implementing Multi-Language Support in Your Application</h1>Translating Content
1. Creating translation file:
- There is a command which extracts the translations to a separate file.
- Make changes in the angular.json file in ‘extract-i18n’ section as given below.
xxxxxxxxxx"extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { “buildTarget: "i18n-localize:build", // < -- 1 "format": "xlf", // < -- 2 "outputPath": "src/locale" // < -- 3 }} . . .xxxxxxxxxx"extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { “buildTarget: "i18n-localize:build", // < -- 1 "format": "xlf", // < -- 2 "outputPath": "src/locale" // < -- 3 }} . . .2. Extracting translations:
- To create translation file run a command:
- the locale folder will get generated in src.
- In the locale folder, you will find a messages.xlf file. This is the base translation file with following contents:
‘ng extract-i18n’
xxxxxxxxxx<!--?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="4420106033344722345" datatype="html"> <source>Angular Localization: Implementing Multi-Language Support in Your Application <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">1,3</context> </context-group> <note priority="1" from="description">Friendly welcoming message</note> <note priority="1" from="meaning">main header</note> </trans-unit> </body> </file></xliff>xxxxxxxxxx<!--?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="4420106033344722345" datatype="html"> <source>Angular Localization: Implementing Multi-Language Support in Your Application <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">1,3</context> </context-group> <note priority="1" from="description">Friendly welcoming message</note> <note priority="1" from="meaning">main header</note> </trans-unit> </body> </file></xliff>- Make a duplicate of messages.xlf file and rename that duplicated file as the name of language messages.fu.xlf. This renamed file is going to store French language translation.
- Add a
tag immediately after the tag in the as follows: - Also provide target-language attributes for the
so the translation management system can detect the locale properly, as shown below.
xxxxxxxxxx<!--?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" target-language="ru"> <body> <trans-unit id="4420106033344722345" datatype="html"> <source>Angular Localization: Implementing Multi-Language Support in Your Application <target>Angular Локализация: реализация многоязычной поддержки в вашем приложении</target> <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">1,3</context> </context-group> <note priority="1" from="description">Friendly welcoming message</note> <note priority="1" from="meaning">main header</note> </trans-unit> </body> </file></xliff> xxxxxxxxxx<!--?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" target-language="ru"> <body> <trans-unit id="4420106033344722345" datatype="html"> <source>Angular Localization: Implementing Multi-Language Support in Your Application <target>Angular Локализация: реализация многоязычной поддержки в вашем приложении</target> <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">1,3</context> </context-group> <note priority="1" from="description">Friendly welcoming message</note> <note priority="1" from="meaning">main header</note> </trans-unit> </body> </file></xliff> 3. We’ll add some configuration within the angular.json file.
- Add new configuration for the fr locale, means for French translation.
xxxxxxxxxx"build": { . . . "configurations": { . . . "ru": { // <-- 1 (for Russian language) "localize": [ "ru" ] }, "fr": { // <-- 2 (for French language) "localize": [ "fr" ] }, "hi": { // <-- 3 (for Hindi language) "localize": [ "hi" ] } }, . . . }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { . . . "ru": { "buildTarget": "i18n-localize:build:development,ru" // <-- 4 (for Russian language)xxxxxxxxxx"build": { . . . "configurations": { . . . "ru": { // <-- 1 (for Russian language) "localize": [ "ru" ] }, "fr": { // <-- 2 (for French language) "localize": [ "fr" ] }, "hi": { // <-- 3 (for Hindi language) "localize": [ "hi" ] } }, . . . }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { . . . "ru": { "buildTarget": "i18n-localize:build:development,ru" // <-- 4 (for Russian language)4. Run this command to see the output of translated language:
‘ng serve —configuration=fr —open’.
locale instead of ‘fr’ you can also add ‘ru’ , for French Language and ‘hi’ for Hindi Language.
Also read- Progressive Web Apps vs Native Apps: What to Choose in 2024
Conclusion :
Angular applications require the implementation of multi-language support. Software Developers may quickly make their application. available to the client including various languages using the built-in localization library of Angular. In this blog, we have learned how to use the i18n library to enable multi-language support in an Angular application.
Read more blogs
Time and Cost of Developing an AI like ChatGPT: Key Factors Explored
Explore the factors influencing the time and cost of developing an AI model like ChatGPT. Understand key considerations for successful AI ap
Amit Verma
27 May 2024
Guide to Successful Real Estate App Development: Features, Technologies, and More
Explore the advantages of developing a real estate app, key features, technologies to employ, and the importance of collaborating with a Rea
Amit Verma
27 May 2024
Custom vs. Template-Based Website Development: A Comprehensive Cost Comparison Guide
Explore the costs, pros, and cons of custom website development vs. template-based solutions. Make an informed decision for your online pres
Amit Verma
27 May 2024