Angular Internationalization (i18n): 1 Codebase - 3 Locales (en/fr/de)

Angular Internationalization (i18n): 1 Codebase - 3 Locales (en/fr/de)

I had lots of fun making this project! We look at how to create an Angular project that targets various localizations (en/fr/de) and outputs three separate builds.

My personal channels:

[LarsRyeJeppesen]

I really wish Angular added support for json files if you want a simpler/faster setup. Xlf tools are either expensive or bad. Just a json file consisting of { id: value } would be sufficient.

[dondlta]

Hey Paul, thanks for the nice video!
Since you asked for the correctness of the german translation:
Although the construction header ("Im Bau") is fair enough, as a german I'd rather call it "Im Aufbau" as it is called in the description.
To be "im Bau" is actually a german phrase and means to be in jail ;)

[blokche_dev]

Hello from France! =)
Useful and quality content, as usual.
Great to see new tutorials and videos.

[RezetRoy]

Please make video about other angular i18n modules (ngx-translate, angular-i18next)

[alxizr]

@Paul Halliday #Paul Halliday greate video, thank you. I have a question for you, how do you make i18n to support multiple languages in the same build ? According to this video we need a build for each language we support.

[LarsRyeJeppesen]

Great video. I'm curious about a thing: when you add the "de"/"en" properties in angular.json, what about all the other properties? How does the angular builder know about those? Should you not copy all properties from "production", or are they somehow included when selecting target "de" or "en" ? confusing

[johanjurie]

Great video! Any options to change locale at run time? Any libraries you can suggest to change languages on the fly?

[unreadwitharun]

Can we get a build of same component in different language on user action ? Rather than deploying a certain build, I want to export a page in different language as per user selects.

[chrissigrilus]

Super Video! Es hat mir sehr geholfen mein neue Projekt international zu machen. Danke : )
Deine Übersetzung ist korrekt ; )

[miketan]

Well done! Thx for showing. Since Angular 9 is out of today, would it be possible to make a video of dynamic language control with in the app if it would be available?. Different deployments for each language is quite cumbersome, I have never seen an app working on different ports just
for languages ;-)

[masterlup]

Maybe a good primer but:
+ Lets say you now add 2 more elements that need translation. How do I append my 3 files (en, fr, de) so that the two new elements are there but the old working stuff is still here?
+ How do I change the locale dynamically at runtime?
+ What is the best practice, copy pasting by hand is not?

[poongodia]

Can we dynamically modify the language by changing the language code in the url? If so how to do the routing configuration for existing application. e.g localhost/4200/#/home. Is it possible to render localhost/4200/#/en/home

[Xeberus]

can you show an example for dynamic translation, f.ex. an {{element.label}} gets multiplie column labels for a table and you need to write the en.js and maybe de.js or some other language and how to solve that situation. i just started with angular some month ago and i can't find a solution online.
i know there is ng xi18n out there, but no where i can find an example for my problem only standart translation.

[girlsincode]

i love your VSCode and terminal themes, what are their names ?
also i like that you zoom properly the screen/text so it's easy to follow it.

[beratsulimani]

Hi Paul, great tutorial, but there if we have 6 languages we will have 6 builds of application, which is insane, i think it will have an improvement in version 8 of i18n,
Also to do in a GUI use qt5 lang to open xlf files.

[sahinnelson]

If i add
"npm run int:extract" comment, i get an error like: ERROR in Unexpected value 'undefined' imported by the module 'DynamicModule. can u explain y?

[balduran]

German dev here. Maybe you should use deepl.com for translation. It works with machine learning (google and microsoft translator doesn't) and works far better than most of its competitors. But the language selection is limited though.
#NotSponsored #NoAd

[sanyogitalondhe]

Thank you. when trying to run npm run start:fr -- --port=4201 getting error An unhandled exception occurred: Configuration 'fr' is not set in the workspace. need help

[seeteshwt]

latest version of cli doesnt create the messages file using ng xi18n

[MoussaEltayeb]

Hello Paul, perfect as usual. Do you have plans to create a video about Server Side Rendering to handle SEO meta tags for JavaScript apps using Angular/ Firestore /Firebase Hosting?