Movatterモバイル変換

[0]ホーム
URL:

Skip to content
DEV Community
Log in Create account

DEV Community

Pantelis Theodosiou
Pantelis Theodosiou

Posted on • Edited on

     

Internationalization ( i18n ) with Angular

Internationalization is the process of designing and preparing your app to be usable in different languages.Localization is the process of translating your internationalized app into specific languages for particular locales.

Therefore, just as you’d ensure that your design is aesthetically-pleasing and accessible, you should also ensure that your text is localized. This is the process of ensuring that your applications support multiple languages. In Angular, this is done in multiple ways.

For example, you can use third-party libraries, such usngx-translate or you can just use the built-in i18n functionality.

Why is Internationalization so important?

These days, with so many websites to choose from, making applications available and user-friendly to a worldwide audience is important. It's the move to make a better user experience.

In this article, we will be focused on using the built-in i18n tool. So let's get started.

New Angular Project

# Install Angular CLI globallynpminstall--global @angular/cli# Create Angular projectng new ng-internationalization# Would you like to add Angular routing? N# Which stylesheet format would you like to use? SCSS# Go to project's directorycdng-internationalization# Open this folder with your favourite editorcode.# Serve the applicationng serve-o
Enter fullscreen modeExit fullscreen mode

Translations

Angular's default locale is set toen-US. To support more languages, we need to update the default configuration and add additional locales. You can find a list of various locale codeshere.

Project Templates

To be able to set the translations up, we need to add some basic content on our application. Head over toapp.component.html and add some content.

<main><section><h1>Why is Internationalization so important?</h1><p>      These days, with so many websites to choose from, making applications      available and user-friendly to a worldwide audience is important. It's the      move to make a better user experience.<small>Find the full article<ahref="https://github.com/ThPadelis/ng-internationalization"target="_blank">here</a></small></p></section></main>
Enter fullscreen modeExit fullscreen mode

We can add some styles to make this site a bit more user-friendly, inside ofapp.component.scss

@importurl("https://fonts.googleapis.com/css?family=Roboto&display=swap&subset=greek");main{display:flex;justify-content:center;align-items:center;height:100vh;background:#6441a5;background:-webkit-linear-gradient(toright,#6441a5,#2a0845);background:linear-gradient(toright,#6441a5,#2a0845);section{font-family:"Roboto",sans-serif;text-align:center;color:#cec6d4;border:solidthin#cec6d4;padding:40px;width:50%;-webkit-box-shadow:15px15px5px0pxrgba(0,0,0,0.75);-moz-box-shadow:15px15px5px0pxrgba(0,0,0,0.75);box-shadow:15px15px5px0pxrgba(0,0,0,0.75);a{color:inherit;}small{display:block;margin-top:10px;}}}
Enter fullscreen modeExit fullscreen mode

And finally, inside ofstyles.scss let's set the body styles

body{margin:0px;padding:0px;box-sizing:border-box;}
Enter fullscreen modeExit fullscreen mode

This is what we should have by this time

Screenshot_1

Text marking

To be able to translate the context in the application, we first need to mark the text with a custom attribute namedi18n. After the text marking, we will be able to translate the application into our desire languages. In our caseel-GR andfr-FR. I will be using Google Translate to translate the text into French.

Let's add thei18n attribute to all of the text that we want to translate

<main><section><h1i18n>Why is Internationalization so important?</h1><pi18n>      These days, with so many websites to choose from, making applications      available and user-friendly to a worldwide audience is important. It's the      move to make a better user experience.</p><smalli18n>Find the full article<ahref="https://dev.to/thpadelis/internationalization-i18n-with-angular-4ao7"target="_blank">here</a></small></section></main>
Enter fullscreen modeExit fullscreen mode

i18n is a custom attribute, recognized by Angular tools and compilers. After translation, the compiler removes it. It is not an Angular directive.

Now, we need ascript that uses Angular CLI to extract this into amessages.xlf file. This file contains all of our marked items. Head over topackages.json and add thisscript

"scripts":{"i18n:extract":"ng xi18n --output-path src/locales"}
Enter fullscreen modeExit fullscreen mode

After adding this script, go ahead and runnpm run i18n:extract. Then, open upscr/locales/messages.xlf and you will see something like this

<?xml version="1.0" encoding="UTF-8" ?><xliffversion="1.2"xmlns="urn:oasis:names:tc:xliff:document:1.2"><filesource-language="en"datatype="plaintext"original="ng2.template"><body><trans-unitid="4bcef995bebcf205074f9fd756b822a488b452cc"datatype="html"><source>Why is Internationalization so important?</source><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">3</context></context-group></trans-unit><trans-unitid="e8db4c58a5fc95a2a8d80183e4b527f4480fa06e"datatype="html"><source>      These days, with so many websites to choose from, making applications      available and user-friendly to a worldwide audience is important. It&apos;s the      move to make a better user experience.</source><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">4</context></context-group></trans-unit><trans-unitid="0f16c7aaa76d2f52dbabcd329ebf11a39a26918d"datatype="html"><source>Find the full article<xid="START_LINK"ctype="x-a"equiv-text="&lt;a&gt;"/>here<xid="CLOSE_LINK"ctype="x-a"equiv-text="&lt;/a&gt;"/></source><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">10</context></context-group></trans-unit></body></file></xliff>
Enter fullscreen modeExit fullscreen mode

For eachhtml element marked with thei18n directive, atrans-unit will be created.

<trans-unitid="4bcef995bebcf205074f9fd756b822a488b452cc"datatype="html"><source>Why is Internationalization so important?</source><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">3</context></context-group></trans-unit>
Enter fullscreen modeExit fullscreen mode

We can provide more information about the translations using this structure by adding adescription. Inside ofapp.component.hmtl, update thei18n items with a description.

<main><section><h1i18n="Title for the article">      Why is Internationalization so important?</h1><pi18n="Description for the article">      These days, with so many websites to choose from, making applications      available and user-friendly to a worldwide audience is important. It's the      move to make a better user experience.</p><smalli18n="Read the whole article">Find the full article<ahref="https://github.com/ThPadelis/ng-internationalization"target="_blank">here</a></small></section></main>
Enter fullscreen modeExit fullscreen mode

Additionally, we can help the translator with adescription and ameaning by using this format

<!-- i18n="<meaning>|<description>" --><main><section><h1i18n="Article Heading|Title for the article">      Why is Internationalization so important?</h1><pi18n="Article Description|Description for the article">      These days, with so many websites to choose from, making applications      available and user-friendly to a worldwide audience is important. It's the      move to make a better user experience.</p><smalli18n="Full Article|Read the whole article">Find the full article<ahref="https://github.com/ThPadelis/ng-internationalization"target="_blank">here</a></small></section></main>
Enter fullscreen modeExit fullscreen mode

We can also se a custom id for persistence and maintenance

<!-- i18n="<meanin>|<description>@@customId" --><h1i18n="Article Heading|Title for the article@@articleHeading">    Why is Internationalization so important?</h1>
Enter fullscreen modeExit fullscreen mode

We can finally generate our translations

npm run i18n:extract
Enter fullscreen modeExit fullscreen mode

Now that we have addedmeaning,description andid ourmessages.xml should look like this

<?xml version="1.0" encoding="UTF-8" ?><xliffversion="1.2"xmlns="urn:oasis:names:tc:xliff:document:1.2"><filesource-language="en"datatype="plaintext"original="ng2.template"><body><trans-unitid="articleHeading"datatype="html"><source>      Why is Internationalization so important?</source><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">3</context></context-group><notepriority="1"from="description">Title for the article</note><notepriority="1"from="meaning">Article Heading</note></trans-unit><trans-unitid="articleDescription"datatype="html"><source>      These days, with so many websites to choose from, making applications      available and user-friendly to a worldwide audience is important. It&apos;s the      move to make a better user experience.</source><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">8</context></context-group><notepriority="1"from="description">Description for the article</note><notepriority="1"from="meaning">Article Description</note></trans-unit><trans-unitid="fullArticle"datatype="html"><source>Find the full article<xid="START_LINK"ctype="x-a"equiv-text="&lt;a&gt;"/>here<xid="CLOSE_LINK"ctype="x-a"equiv-text="&lt;/a&gt;"/></source><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">14</context></context-group><notepriority="1"from="description">Read the whole article</note><notepriority="1"from="meaning">Full Article</note></trans-unit></body></file></xliff>
Enter fullscreen modeExit fullscreen mode

Translations

At this point, we have amessages.xlf file that contains all of the items that we want to translate. Let's create a copymessages.xlf for each language we want to translate the application.

cpsrc\locales\messages.xlf src\locales\messages.fr.xlfcpsrc\locales\messages.xlf src\locales\messages.el.xlf
Enter fullscreen modeExit fullscreen mode

Greek

Let's start withmessages.el.xlf. We will translate the messages by using thetarget andsource. Thetarget attribute is the the translation in that language.

<?xml version="1.0" encoding="UTF-8" ?><xliffversion="1.2"xmlns="urn:oasis:names:tc:xliff:document:1.2"><filesource-language="en"datatype="plaintext"original="ng2.template"><body><trans-unitid="articleHeading"datatype="html"><source>Why is Internationalization so important?</source><target>Γιατί είναι τόσο σημαντική η διεθνοποίηση;</target><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">3</context></context-group><notepriority="1"from="description">Title for the article</note><notepriority="1"from="meaning">Article Heading</note></trans-unit><trans-unitid="articleDescription"datatype="html"><source>These days, with so many websites to choose from, making applications available and user-friendly to a worldwide audience is important. It&apos;s the move to make a better user experience.</source><target>Αυτές τις μέρες, ανάμεσα σε τόσους ιστότοπους για να διαλέξεις, κάνοντας εφαρμογές διαθέσιμες και φιλικές προς τον χρήστη είναι σημαντικό. Είναι μία κίνηση για καλύτερη εμπειρία χρήστη.</target><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">8</context></context-group><notepriority="1"from="description">Description for the article</note><notepriority="1"from="meaning">Article Description</note></trans-unit><trans-unitid="fullArticle"datatype="html"><source>Find the full article<xid="START_LINK"ctype="x-a"equiv-text="&lt;a&gt;"/>here<xid="CLOSE_LINK"ctype="x-a"equiv-text="&lt;/a&gt;"/></source><target>Βρείτε ολόκληρο το άρθρο<xid="START_LINK"ctype="x-a"equiv-text="&lt;a&gt;"/>εδώ<xid="CLOSE_LINK"ctype="x-a"equiv-text="&lt;/a&gt;"/></target><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">14</context></context-group><notepriority="1"from="description">Read the whole article</note><notepriority="1"from="meaning">Full Article</note></trans-unit></body></file></xliff>
Enter fullscreen modeExit fullscreen mode

French

Now, let's do the same formessages.fr.xlf in French

<?xml version="1.0" encoding="UTF-8" ?><xliffversion="1.2"xmlns="urn:oasis:names:tc:xliff:document:1.2"><filesource-language="en"datatype="plaintext"original="ng2.template"><body><trans-unitid="articleHeading"datatype="html"><source>Why is Internationalization so important?</source><target>Pourquoi l'internationalisation est-elle si importante?</target><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">3</context></context-group><notepriority="1"from="description">Title for the article</note><notepriority="1"from="meaning">Article Heading</note></trans-unit><trans-unitid="articleDescription"datatype="html"><source>These days, with so many websites to choose from, making applications available and user-friendly to a worldwide audience is important. It&apos;s the move to make a better user experience.</source><target>Ces jours-ci, avec autant de sites Web à choisir, il est important de rendre les applications disponibles et conviviales pour un public mondial. C'est le geste d'améliorer l'expérience utilisateur.</target><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">8</context></context-group><notepriority="1"from="description">Description for the article</note><notepriority="1"from="meaning">Article Description</note></trans-unit><trans-unitid="fullArticle"datatype="html"><source>Find the full article<xid="START_LINK"ctype="x-a"equiv-text="&lt;a&gt;"/>here<xid="CLOSE_LINK"ctype="x-a"equiv-text="&lt;/a&gt;"/></source><target>Retrouvez l'article complet<xid="START_LINK"ctype="x-a"equiv-text="&lt;a&gt;"/>ici<xid="CLOSE_LINK"ctype="x-a"equiv-text="&lt;/a&gt;"/></target><context-grouppurpose="location"><contextcontext-type="sourcefile">src/app/app.component.html</context><contextcontext-type="linenumber">14</context></context-group><notepriority="1"from="description">Read the whole article</note><notepriority="1"from="meaning">Full Article</note></trans-unit></body></file></xliff>
Enter fullscreen modeExit fullscreen mode

NOTE: These are not correct translations for French. Be kind to me.

Locale build configuration

Perfect! Now, we have three versions of our application.

A good practice is to have ascript that builds the application for each locale we want to support.

Head over toangular.json and add the below configurations.

{"projects":{"ng-internationalization":{"architect":{"build":{"configurations":{"fr-FR":{"aot":true,"outputPath":"dist/fr-FR","i18nFile":"src/locales/messages.fr.xlf","i18nFormat":"xlf","i18nLocale":"fr","i18nMissingTranslation":"error"},"el-GR":{"aot":true,"outputPath":"dist/el-GR","i18nFile":"src/locales/messages.el.xlf","i18nFormat":"xlf","i18nLocale":"el-GR","i18nMissingTranslation":"error"}}},"serve":{"configurations":{"production":{"browserTarget":"ng-internationalization:build:production"},"fr-FR":{"browserTarget":"ng-internationalization:build:fr-FR"},"el-GR":{"browserTarget":"ng-internationalization:build:el-GR"}}}}}}}
Enter fullscreen modeExit fullscreen mode

NOTE: I've omitted most of the file to keep it brief.

Let's create some more scripts inside thepackage.json file to be able tobuild andserve our new locales.

"scripts":{"start":"ng serve","start:fr":"ng serve --configuration=fr-FR","start:gr":"ng serve --configuration=el-GR","build":"ng build","build:fr":"ng build --configuration=fr-FR","build:gr":"ng build --configuration=el-GR",}
Enter fullscreen modeExit fullscreen mode

NOTE: Once again, I kept the file brief.

It's time to see what we have created.

npm run startnpm run start:fr----port 4201npm run start:gr----port 4202
Enter fullscreen modeExit fullscreen mode

And there you go! | Et Voilà! | Μπουμ!

i18n

Conclusion

Internationalization and localization are an important part of an application. We can use angular-cli to support it or install and external library to save some time.

References / Resources

  1. i18n
  2. ngx-translate

If you found this post helpful or enjoyed it, consider supporting me bybuying me a coffee. Your support helps me create more valuable content. ☕ Thank you!

Top comments(5)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
arielgueta profile image
Ariel Gueta
FrontEnd developer
  • Joined
•

Transloco is the hot thing now.github.com/ngneat/transloco

CollapseExpand
 
ptheodosiou profile image
Pantelis Theodosiou
Web developer passionate about software engineering and coffee.
  • Location
    Thessaloniki, Greece
  • Education
    B.Sc in Computer Science
  • Work
    Software Developer at Athens Technology Center
  • Joined
•

Thanks for your response. I think that the idea behind these 3rd parties libraries have always been to provide support for i18n until Angular catches up, after that, these libraries will probably be deprecated.

CollapseExpand
 
arielgueta profile image
Ariel Gueta
FrontEnd developer
  • Joined
•

I think that you will never get the same tools by using the built-in support.

Thread Thread
 
ptheodosiou profile image
Pantelis Theodosiou
Web developer passionate about software engineering and coffee.
  • Location
    Thessaloniki, Greece
  • Education
    B.Sc in Computer Science
  • Work
    Software Developer at Athens Technology Center
  • Joined
•

Maybe it's true, maybe it's not. Who knows? 🙃

CollapseExpand
 
yagoferrer profile image
Yago
  • Joined
•

How do you translate routes with Angular?

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Web developer passionate about software engineering and coffee.
  • Location
    Thessaloniki, Greece
  • Education
    B.Sc in Computer Science
  • Work
    Software Developer at Athens Technology Center
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account
[8]ページ先頭
©2009-2025 Movatter.jp