Introduction to Internationalization in Angular

Hi friends! In this video our very own Mark Thompson covers how to internationalize and localize an application in Angular.
Code → github.com/MarkTechson/i18n-r...
Angular Twitter → / angular
Mark's Twitter → / marktechson
00:00 Welcome
00:23 Introduction
00:49 Internationalization vs Localization
03:04 Project Description / Start
03:39 Installing Dependencies & angular.json configuration
05:28 Internationalizing the application
06:25 Adding i18n attributes
07:37 Extracting translations
09:26 Localize the application
10:15 Why does Angular handle translations in this way?
12:31 Conclusion

[@rembautimes8808]

I really like these videos. The presenter is awesome, the content creation and curation team is wonderful as well. Within 8 mins, we got the concept of how this is going to work. High five to the team!

[@vijay_kishan]

I feel JSON approach is more better than the xlf one.

[@Angular]

No problem, Vijay! Just use the "--format" flag and switch the translation files to .json :) Thanks for watching!

[@rishabraina4406]

can u suggest a link for .json implementation

[@ryanfmatos]

@@rishabraina4406 7:38, i guess you would put "--format" here, passing json and then the file should be created and you'll only need to add the "target"" attribute

[@cryptovolts]

@@Angular I love you guys !

[@vidhyak1294]

@@Angular Can we implement translation in MFE Architecture? If so, how can we share the language between mfe projects?

[@AlainBoudard]

Excellent presentation ! Indeed you pointed out the pros and cons. Also you could have talked about using this technique with our Angular libraires.

[@NitinJadhav]

This approach is much smoother than a lot of other implementations of i18n I have seen. Good job, team!

[@JoeFree1985]

Excellent breakdown!!! Very very useful!!!

[@lbedoya13]

That was pretty cool to do, and I agree with localization on build time. Great content 💯

[@markthompson-g]

So glad you've enjoyed it!

[@otmanm4095]

Love your work, love Angular, so much things to make life easier, thanks.

[@grishamozias6354]

In my humble opinion, the reactive approach are much better. less boilerplates, better readability and easier for deployment. for large scale applications, probably, I will still have to refresh the page, but it's a small price to pay :). Anyway, a new Angular 15 it's a blessing! I was waiting for a standalone components for many years! Thank you for your great work!

[@dizzapath6760]

amazing explanation, thank you!

[@dimitridovgan6364]

Great stuff, keep it up! :)

[@alex_chugaev]

Every Angular project I was working on does not use default translation tools. Every uses ngx-translate as simpler and more flexible solution. I thing Angular team should review the approach in favor of something better.

[@dogoku]

Transloco is also a good alternative, given that there is no new development for ngx-translate

[@skinwalker_]

Great explanation! Thanks

[@thomaswaldbillig]

great video, but i have a couple of questions: does this also work if you use libraries? can anyone recommend a good tool to translate and manage xlf files?

[@mazenkhiami9116]

Nicely presented

[@javidg4197]

Can we run react application inside application application and communicate btwn them?

[@SD-nm6qp]

Can this be used for timezone? We store all records in UTC but want to show date/time according to the user time zone.

[@armandmugabo1170]

awesome video, super cool

[@huw1676]

I came up with my own solution in Angular 6 back in early June 2018. My site supports multiple languages, and even switches to your preferred language such that you don't have to. It's good though that this comes as-supported in the later versions of Angular.

[@vidhyak1294]

How to do translations in micro frontend architecture? how to sync the language switch between shell and remote?

Great! ...but how to test templates with localized things?

[@therealJayRoe]

How do you get autocompletion for angular.json in VSCode?

[@DavidJames535]

I want to have an option tag and select the language I want. How can I do that?

[@MuhammadHassan-yt2vv]

hi, i want dropdown to switch language and want to add more than 5 languages. so how to add target for that and how to add target once for whole page in different language

[@BCASUDHAGARM]

How about using the google translate inside the application Is this possible ?

[@shrutiroy3527]

My page reloads to Spanish version for /en-US .... Can anyone tell me what the problem might be?

[@mohitsoni8951]

If we have 40-45 languages, how we would handle it from angular.json ? In previous version can simply use i18n-file, i18n-format, i18nLocale params with build

[@1qais1]

How can we create a button to change locale in the runtime for users ?

[@maxstetsenko8626]

Great content !

[@universalworthy2169]

Hi Mark, how to switch between these two languages? My app keeps staying in the translated version.

[@amrezzat2192]

how to configure an IIS server to support Localization?

[@user-uq1sz2sw1w]

Is there any way to hide the default locale from the route path? ex: my default locale is "pt" I want to use it like: localhost:4200/home instead of localhost:4200/pt/home in other locales, its ok to have it in the route path.

[@filmy_tunes_bollywood]

the last serve command is giving error.. do i need to install someting?

[@vladimirv6438]

Thank you for this content. Could you also tell how to deal with i18n when using *ng-Stuff (like *ngFor, *ngIf....) In the version i have tested it is just disappearing silently... and grey hair appear...

[@schlingelgen]

I only ever used the approach where you have messages.en and other files and reference a specific key which has a value in every file for the respective language. This approach seems very complicated to me and I don't see the benefit. Can someone enlighten me?

[@user-qh2wh2se2d]

each time i run ng extract-i18n, i would have to rebuild the locale versions ? is there .xlf tools that handle that ?

[@leoandres72]

Buenísima excelente tu explicación...

[@ishowspeed7191]

is target tag gets the translated text automatically or we need to set that manually sir!. because i didn't get that translated text by default sooo...

[@danielaldridge818]

Im not sure what is going on. Where did the Translation service come from? How was the build done? Are you saying there are multiple builds, one for each language?

[@williamramirezlizano]

Question: this covers the translation of static html content, like the td's or h2's, but how would you go about translating dynamic content, such as the description for a sale item retrieved from some container? I am starting development of a large site that works in many languages and need to translate dynamic content, what would be the best and most efficient way to do this? Thank you.

[@user-yw5iv3fz5k]

Hi there. Although my response may be a bit delayed, I hope it can still be beneficial to others. The responsibility for translating dynamic content typically lies with the CMS system rather than the SPA framework. Nowadays, most CMS systems support content localization and can deliver the correct version through APIs such as REST (often based on the Accept-Language header, for instance).

[@nieuwenaam233]

Hi, I am looking to internationalize my application, but when looking online no one is mentioning anything about a button to switch between languages. Is this because the browser is detecting the locale of the user and loading the right translation dynamically? And how would one code a button for users to switch from one locale to another? Thanks in advance

[@vhusani]

did you manage to get this ?

[@dinesh.merugumilli]

The command `ng extract-i18n --output-path ` is now changed to `ng xi18n --output-path `

[@GradeFX]

It's the same. Just an alias

[@icesystem7]

To me doesn't make much sense, so we generate the xlf file.. copy.. edit, and translate. so far so good. later we need to add another translation.. remove others..etc How is this suppose to happen exactly? every time we make an update we have to go again trough the whole file and add the translated element?

[@lahatraanjararavelonarivo9125]

Thanks a lot🙏! I like so much angular and this video really help me. But I have a question that is not concerned this post a lot. How to use angular with websocket ? (receiving notifications for the back-end for example or making a chat application in angular).

[@SvenBudak]

This tutorial is very good, but it forgets the most important question. How do you get the country code (for example, /de or /en) into the routing of the Angular app?

[@MaximeTrichard]

One remaining point you should talk about with the Angular approach is the versioning of the XLF files. This is a pain in the ... Bottom-back area (pls don't ban me KZbin). Creating XLF files is great but changes in the code result in references moving in the file, which means you either have to create all files at the end of the app (problematic for industrial apps which are always evolving), or try to keep all files up to date (which is the infamous pain). How should one tackle this issue, in the Angular opinionated way ?

[@TimothyBrake]

My post keeps getting deleted so I will just add the issue I’d where this is being discussed on GitHub Angular project “Generating and managing the translations files for large scale applications like ERP etc is very cumbersome. #26960” Angular-cli project “Perform a xliffmerge in extract-i18n command #23139” Hope this gets some traction 🤞

[@alexartigas9181]

The fact that the Angular team even published this video is mind blowing... And don't take me wrong, I love the approach of build time i18n, but what's the point of using this feature if you can only maintain one language? The whole point of doing i18n is for cases of multi language and there is no way of updating nothing but the original file without losing all your already translated strings for the other ones. The video doesn't even talk about this. Am I missing something or is this a half baked feature?

[@expertreviews1112]

10:11 where are the links in the description????

[@albanx1]

I do use translation run time (cause I support only 2 languages). The performance issue with the binding I solved it using with a pure pipe with an extra parameter (language) which is triggered only if the language changes: {{ 'Category' | _: trans.lang }}

[@aniruddhadas9]

i thought someday angular will provide a batter solution to runs translation run time and I will replace my ngx-translation solution. disappointed . ngx-translate handles big design system (500 components) and around 36 apps (2 apps are really huge). Great performance, pretty happy with it. angular really need to think about there translation solution why user need to create/build site for each locale

[@nasso_]

note that with regards to a11y, the image in this example should have an empty alt text without i18n because its purely decorative and doesn't provide any information. alternatively, it could be a background image. it's nice that the framework supports translating alt text though. maybe a better example would be a picture of the product being purchased

[@dogoku]

At 11:20 saying that "translation files aren't tree-shakable" is misleading. Libraries like transloco allow us to split translations across modules and lazy load only when the module loads. It's not tree-shaking, but the impact is far less when you split your modules correctly

[@dalim8226]

Sweet, now I can finally get rid of old i18n packages :)

[@ZapOKill]

did someone at google actually use it in production? there is so much tooling missing for incremental updates.

[@bullettime2808]

I don't see the translation in the app, I have no Idea what I missed

[@xaviersoh]

Well done

[@trunghieulam3623]

We need a tool to do the auto-translator, that way will more convenient. Even with the enterprise, a GUI for the translators to check is more professional. Why not if we're doing it on Angular standard.

[@sundarraj9384]

ng add @angular/localize ng extract-i18n --output-path src/locale

[@aram5642]

SaaS apps usually define and load strings via CMS. Separate build for each language? Doesn't sound very user friendly, but at least solves the challenge of localizing the route slugs.

[@michaelfaith]

Great video Mark. You mentioned there being a way to do runtime language change with $localize, and i do recall that being one of the features that the Ivy compiler was going to enable, but you said it was only possible to do it once? I don't quite understand what you meant by that. Does that mean if source language is en-US, for instance, you could only change to fr-CA, but not back and not to any other language? Any guidance on how that setup differs from what you shared here?

[@ExequielCeasarNavarrete]

You could do it before the app bootstraps. only once. you need JSON format to do it. Also you need to pass the fetched json to `loadTranslations` function from `@angular/localize`

Hi @Angular, I could not find a way to add missing common locals, for example I am trying to add ht (for haitian creole). I see that they are extracted directly from CLDR. I translated all the necessary ts/js/mjs files but they are not in the node_module. @import seems to ignore it

I used postintall 🎉🎉🎉🎉🎉

[@knotsable]

Question: its nice to have /en, /fr and /es folders, but the user will end up at the root /. When using a type of hosting that allows you to do url rewriting, you do so some smart redirecting, but you dont always have that option: you might be using simple static file webservers, or aws amplify, azure static websites, ... how do you handle the first request? How does the initial user end up in the correct folder if you can not do anything on the server? And of course, preferably in a SEO safe way (so no fancy js scripts that redirect you to the correct folder)

[@elmotareal]

All hosts have an option, in netlify for example you can use language cookie, in firebase you can either use i18n or write a serverless function to read a cookie, or auto redirect. in surge, you can redirect the root index.

[@heitorb2460]

“We pass the locale files to the translator, but in this case, we are going to do it manually.” - can you please explain how to pass to the “translator”? I want automatic translation, not to manually add strings to those files.

[@NitinJadhav]

Translator here probably means the person who uses special software to process the locale file

[@saikrishna4943]

Nice video Can you please make a video How to deploy angular universal in cPanel shared hosting server with nodejs server

[@saeednoruzic]

i think you must make a beginner friendly tutorial in official angular Chanel; I want to learn angular but I don't know how I must structure my component and module a good way so when I expand my project to get more feature

[@elmotareal]

This looks simpler than what it really is :) I wish you would cover one issue though, when new pages come in, and we extract all over again, what happens to the existing translations? do we have to extract to a new file then merge manually? or does the merge happen automatically?

[@salomonayah4637]

Angular Team, You must reply to this ! I'm wondering

[@savopejovic25]

Automatic merge

[@icesystem7]

@@salomonayah4637 "oh.. we didn't think that far"

[@robertomessa9126]

@@savopejovic25 how?

[@savopejovic25]

@@robertomessa9126 Don't remember anymore

[@nikoszervo]

The only thing in Angular that I don't like. I wish it was similar to what android does for localization. But it's good that we have a way of doing that.

[@pavanbashetty3409]

I got an error after running "serve dist\with-localize-two\" serve : The term 'serve' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1

[@jimmylansurquin6656]

serve is not installed on your PC, either you install it with npm or you retouch your command with npx serve dist/the name of your app

[@newen1314]

That's great, but this is just the tip of the iceberg, switching language (with route or select option) is another story that is sadly not covered in this tutorial and could have been really useful for beginners like me having just the internet to learn.

[@aniruddhadas9]

great presentation

[@joelwachter3557]

I need this tshirt!

[@seanbybee6098]

So no ability to switch languages within the app? Makes it pretty useless in a locale where multiple languages are spoken.

[@Angular]

Do you find that users in your applications switch frequently during a session? Switching to a new language just requires a page refresh. From our experience users can tolerate that since they will likely not be switching multiple times during a session. Hope that helps!

[@kolobamanacas]

@@Angular I'm still scrolling though the comments from the top up to this point and this question has been asked at least four times already, but still no answer is given, so I'll try my luck and ask once more. Most modern websites don't utilize approach of navigating to different URLs like "/en" or "/es" to change locale, but have dedicated toggle or button or list which allows a user to choose layout language. Thus I dare to say, this toggle-based UX is the most desired for most developers and users. We don't bother if the page is fully reloaded when a user presses this "en/es" toggle (as you fairly mentioned pros and cons of the approach), but for beginner Angular developers it is not so obvious how to implement this. This video is great, but having some simple follow up tutorial or example showing how to implement this change-locale-toggle-button (yes, fully reloading the page in the process) would be just amazing. Thanks in advance.

[@jacekmaolepszy5342]

Done !

[@niku1655]

rather than multiple builds for each locale, it should create one build only for multiple locales.

[@fredzouza]

Witch version are you using? Using cli 15+ doesn't work nothing happens no errors just don't work, in my enviroment i create a project with cli 12 and works fine but using 15+ don't.

[@Angular]

Which command are you running that's failing silently?

[@bitbinge]

Amazing tutorial.

[@icesystem7]

amazing tutorial to a potato solution :))

[@vijayu707]

All these time, i was using ngx-translate; ufff.....Could somebody add in details which one to choose, why with pros/cons. it would be helpful for many including me...

[@Angular]

Mark discusses this a bit at 10:15

[@Krilllind]

We used to make use of `ngx-translate` before `@angular/localize` package and the tagged template literal was available. Now I would recommend making use of `$localize` instead. It allows for much easier translation and no need to a service to be injected. Also like mentioned, no overhead of performing translation lookups at runtime

[@AlainBoudard]

@@Krilllind and do you have experience with using localize within librairies ?

[@Krilllind]

@@AlainBoudard Do you mean building one or consuming one?

[@AlainBoudard]

@@Krilllind I mean building one

[@duccm]

go team😃

[@Ostap1974]

What is the best way to translate "Hi {{ name ? name : 'stranger' }}, this is your {{ product }}" to my (imaginary) language "itumu {{ product }}, hallo {{ name ? name : 'anonymo' }}!"?

[@davidsosa5940]

what is that vs theme

[@Angular]

high contrast

[@niku1655]

runtime translation should also be available to the developer for lightweight projects

[@cpaynesa]

I was hoping we could finally remove Transloco; but it's unfortunate to only support build time, respect the decision.

[@Angular]

Yeah, if you absolutely need to switch at run-time and a once refresh is unacceptable then you'll have to consider using a different solution.

[@aniruddhadas9]

for I use ngx-translate with a big design system (500 components) and around 36 apps (2 apps are really huge). Great performace, pretty happy. dont like this solution of angular though

[@Krilllind]

Note! They actually did one thing wrong in this video. You cannot write $localize`${this.title}`, as the resulting source in your translated file won't become "Your Receipt" but rather just "this.title". This later on won't be of any help to your linguist. Instead, make sure that the value you intend to translate is within the template literal. e.g. $localize`Your Receipt` See: 8:59 ( node) for reference and compare with other values.

[@ExequielCeasarNavarrete]

Yah. Totally agree

[@mahdirezazadeh5076]

The font size is too small :(

[@Angular]

Thanks for letting us know! We'll be sure to work on that.

[@TMMBlackHawk]

Sorry but the built-in solution is still pain. I stick with ngx-translate

[@venussmodzhd1886]

Nice for referencing Puertorrican Spanish lol 😁👍🏼

[@WeihanLi-iHerb]

A little sucks that can not change language dynamically

[@Angular]

Have you found that your users are having trouble with the language change having a page refresh?

[@WeihanLi-iHerb]

@@Angularnope, only for development experience

[@muhammadhamza3231]

select default arabic in angular

WOOOOOOW! 😲. Ng-translate is deprecated

[@serhioromano]

Angular cannot make things the right way. XLF? Seriously? So good I have not used angular for years. It was not a mistake to ditch it.

[@TayambaMwanza]

.xlf us actually industry standard for translators so it makes sense.

[@serhioromano]

@@TayambaMwanza how is it an industry standard if I first time hear about it? I mean it might be well used but certainly not an industry standard.

[@jakubliska4730]

@@serhioromano it is an industry standard....

[@serhioromano]

@@jakubliska4730 If project developers calls it so, it does not mean it is.

[@valikonen]

OMG it's ugly this approach!

[@rk1484]

I am getting below error An unhandled exception occurred: ENOENT: no such file or directory, open 'C:\Users\u1281417\myapp\src\locales\messages.hi.xlf' FYI I have also added @angular/PWA in my project