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_kishan2 жыл бұрын
I feel JSON approach is more better than the xlf one.
@Angular2 жыл бұрын
No problem, Vijay! Just use the "--format" flag and switch the translation files to .json :) Thanks for watching!
@rishabraina44062 жыл бұрын
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?
@NitinJadhav Жыл бұрын
This approach is much smoother than a lot of other implementations of i18n I have seen. Good job, team!
@AlainBoudard2 жыл бұрын
Excellent presentation ! Indeed you pointed out the pros and cons. Also you could have talked about using this technique with our Angular libraires.
@lbedoya132 жыл бұрын
That was pretty cool to do, and I agree with localization on build time. Great content 💯
@markthompson-g2 жыл бұрын
So glad you've enjoyed it!
@JoeFree19852 жыл бұрын
Excellent breakdown!!! Very very useful!!!
@alex_chugaev2 жыл бұрын
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.
@dogoku2 жыл бұрын
Transloco is also a good alternative, given that there is no new development for ngx-translate
@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!
@MaximeTrichard2 жыл бұрын
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 ?
@TimothyBrake2 жыл бұрын
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 🤞
@alexartigas91812 жыл бұрын
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?
@williamramirezlizano2 жыл бұрын
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).
@nieuwenaam2332 жыл бұрын
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 ?
@otmanm4095 Жыл бұрын
Love your work, love Angular, so much things to make life easier, thanks.
@Krilllind2 жыл бұрын
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.
@ExequielCeasarNavarrete2 жыл бұрын
Yah. Totally agree
@elmotareal2 жыл бұрын
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"
@robertomessa91269 ай бұрын
@@savopejovic25 how?
@savopejovic259 ай бұрын
@@robertomessa9126 Don't remember anymore
@dinesh.merugumilli2 жыл бұрын
The command `ng extract-i18n --output-path ` is now changed to `ng xi18n --output-path `
@GradeFX Жыл бұрын
It's the same. Just an alias
@dogoku2 жыл бұрын
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
@danielaldridge8182 жыл бұрын
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?
@nasso_2 ай бұрын
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
@heitorb24602 жыл бұрын
“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
@dimitridovgan63642 жыл бұрын
Great stuff, keep it up! :)
@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.
@dizzapath67604 ай бұрын
amazing explanation, thank you!
@SvenBudak8 ай бұрын
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?
@aram56422 жыл бұрын
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.
2 жыл бұрын
Great! ...but how to test templates with localized things?
@thomaswaldbillig2 жыл бұрын
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?
@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.
@DavidJames535 Жыл бұрын
I want to have an option tag and select the language I want. How can I do that?
@michaelfaith2 жыл бұрын
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?
@ExequielCeasarNavarrete2 жыл бұрын
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`
@trunghieulam36232 жыл бұрын
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.
@dalim82262 жыл бұрын
Sweet, now I can finally get rid of old i18n packages :)
@skinwalker_ Жыл бұрын
Great explanation! Thanks
@expertreviews1112 Жыл бұрын
10:11 where are the links in the description????
@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.
@mazenkhiami91166 ай бұрын
Nicely presented
@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
@cpaynesa2 жыл бұрын
I was hoping we could finally remove Transloco; but it's unfortunate to only support build time, respect the decision.
@Angular2 жыл бұрын
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.
@aniruddhadas92 жыл бұрын
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
@ZapOKill6 ай бұрын
did someone at google actually use it in production? there is so much tooling missing for incremental updates.
@aniruddhadas92 жыл бұрын
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
@knotsable2 жыл бұрын
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.
@lahatraanjararavelonarivo91252 жыл бұрын
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).
@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?
@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...
@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.
@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...
@seanbybee60982 жыл бұрын
So no ability to switch languages within the app? Makes it pretty useless in a locale where multiple languages are spoken.
@Angular2 жыл бұрын
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.
@anneyo5627Ай бұрын
For everyone who is asking him/herself how to test it in the browser run: ng serve --configuration=nl (for dutch for example)
@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 }}
@armandmugabo11702 жыл бұрын
awesome video, super cool
@saeednoruzic2 жыл бұрын
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
@maxstetsenko8626 Жыл бұрын
Great content !
@vidhyak1294 Жыл бұрын
How to do translations in micro frontend architecture? how to sync the language switch between shell and remote?
@filmy_tunes_bollywood4 ай бұрын
the last serve command is giving error.. do i need to install someting?
@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?
@SD-nm6qp2 жыл бұрын
Can this be used for timezone? We store all records in UTC but want to show date/time according to the user time zone.
@user-qh2wh2se2d Жыл бұрын
each time i run ng extract-i18n, i would have to rebuild the locale versions ? is there .xlf tools that handle that ?
@1qais17 ай бұрын
How can we create a button to change locale in the runtime for users ?
@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
@universalworthy21692 жыл бұрын
Hi Mark, how to switch between these two languages? My app keeps staying in the translated version.
@niku16552 жыл бұрын
runtime translation should also be available to the developer for lightweight projects
@Harish-ff7jl13 күн бұрын
How to translate the content which is recieved from api
@niku16552 жыл бұрын
rather than multiple builds for each locale, it should create one build only for multiple locales.
Жыл бұрын
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 🎉🎉🎉🎉🎉
@joelwachter35572 жыл бұрын
I need this tshirt!
@shrutiroy35272 жыл бұрын
My page reloads to Spanish version for /en-US .... Can anyone tell me what the problem might be?
@sundarraj938411 ай бұрын
ng add @angular/localize ng extract-i18n --output-path src/locale
@leoandres722 жыл бұрын
Buenísima excelente tu explicación...
@therealJayRoe Жыл бұрын
How do you get autocompletion for angular.json in VSCode?
@amrezzat2192 Жыл бұрын
how to configure an IIS server to support Localization?
@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
@javidg41972 жыл бұрын
Can we run react application inside application application and communicate btwn them?
@saikrishna49432 жыл бұрын
Nice video Can you please make a video How to deploy angular universal in cPanel shared hosting server with nodejs server
@BCASUDHAGARM2 жыл бұрын
How about using the google translate inside the application Is this possible ?
@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
@jimmylansurquin665610 ай бұрын
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
@xaviersoh Жыл бұрын
Well done
@bullettime2808 Жыл бұрын
I don't see the translation in the app, I have no Idea what I missed
@vijayu7072 жыл бұрын
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...
@Angular2 жыл бұрын
Mark discusses this a bit at 10:15
@Krilllind2 жыл бұрын
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
@AlainBoudard2 жыл бұрын
@@Krilllind and do you have experience with using localize within librairies ?
@Krilllind2 жыл бұрын
@@AlainBoudard Do you mean building one or consuming one?
@AlainBoudard2 жыл бұрын
@@Krilllind I mean building one
@venussmodzhd18862 жыл бұрын
Nice for referencing Puertorrican Spanish lol 😁👍🏼
@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?
@duccm Жыл бұрын
go team😃
@Ostap19742 жыл бұрын
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' }}!"?
@jacekmaolepszy53422 жыл бұрын
Done !
@TMMBlackHawk2 жыл бұрын
Sorry but the built-in solution is still pain. I stick with ngx-translate
@bitbinge2 жыл бұрын
Amazing tutorial.
@icesystem7 Жыл бұрын
amazing tutorial to a potato solution :))
@aniruddhadas92 жыл бұрын
great presentation
@mahdirezazadeh50762 жыл бұрын
The font size is too small :(
@Angular2 жыл бұрын
Thanks for letting us know! We'll be sure to work on that.
@davidsosa5940 Жыл бұрын
what is that vs theme
@Angular Жыл бұрын
high contrast
@muhammadhamza3231 Жыл бұрын
select default arabic in angular
@WeihanLi-iHerb9 ай бұрын
A little sucks that can not change language dynamically
@Angular9 ай бұрын
Have you found that your users are having trouble with the language change having a page refresh?
@WeihanLi-iHerb9 ай бұрын
@@Angularnope, only for development experience
2 жыл бұрын
WOOOOOOW! 😲. Ng-translate is deprecated
@valikonen10 ай бұрын
OMG it's ugly this approach!
@serhioromano2 жыл бұрын
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.
@jakubliska47307 ай бұрын
@@serhioromano it is an industry standard....
@serhioromano7 ай бұрын
@@jakubliska4730 If project developers calls it so, it does not mean it is.