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

hi and welcome to my video on how to use internationalization which is IAT men inside of angular so right here we have an article over an alligator dot IO which I draw which is essentially this video in article format if we scroll down the bottom you can see that we have the final result which is making three applications here but from one code base and each one has a different locale so right here we are any US and here we are German and of course down here at the bottom we are in French we'll be looking at how to use our code base and NPM to build this in multiple different locales so let's jump in to the app and create a new angular app with the angular CLI so the first thing I'd like you to do is run NPM install at angular slash CLI dash G if you haven't installed the angular CLI before let's now create a new angular application by using ng new angular int this will go ahead and create a new project and we don't want to use var thing and also we can either use CSS or s CSS I selected s CSS but it really doesn't matter for this project so when we start thinking about translations and locale the default locale for an angular app is in u.s. so we'll have to add other locales and update our configuration to build different versions of the app so that'll be things like French German each one will be its own separate app but ill point toward messages which we'll look at very soon we can now CD into angular int and of course open this up inside a visual studio code and after that run this inside of our browser using ng serve so now let's head over to app component don't HTML inside of here we have is simple angular app which you can see but we're going to delete that and just make a section with one article and inside of that h1 which simply says under construction and a paragraph tag which says practically the same thing so we can make this a little bit more magical by heading over to our component s CSS and we can save for the section we want to display that in Flex we want to justify the content to the center set the height to a hundred view height and then we want to set a background which is equal to a linear gradient and that will go to the right starting from a purple to a different shade like so finally we'll also need to align the items inside of the center so I'm not too bad now we need to head over to the article and inside of here we want to have the text aligned to be Center the color to be white as well as different things such as the border finally we'll add a box shadow and we'll simply just sent that to RGB in zero zero zero zero point eight and here we have a very simple application the final thing we'll need to do is head over to Styles scss and make a global HTML of body in which we'll set the padding and margin to be zero so that we have up we've got our application on screen now let's look at how we can mark text for translation so inside of our component door HTML lets only items that we want to translate add an i18n directive once we do that this tells angular that we want to change this text into a different locale by running ng X i18n in the terminal this will extract all of the messages that have this i18n attribute and then it will make in messages file out of that let's make that easier for ourselves by heading over to package John JSON and inside of here we want to make an int extract that simply just the name of the script it doesn't mean anything other than internationalization extract so let's ng X I want it and remember that you have to add the X here instead of just I warned it end it is X i18n let's pull up the terminal now and from within this folder let's run npm run int extract and i will go ahead and run that command and the reason we have put it in the package don't JSON it just makes it much easier and will like the changes we'll need to make to this in the future so as you can see we've run that command we have no errors and if we look inside of our source folder we can see that we have this messages dot x LF this is an XML file and sometimes it can be hard to read and understand what's going on but if we just focus on these transy units this is a translation unit and this source is equal to the i18n attributes that we placed on those HTML tags so you can see here we have this under construction and we have this under here this page is under construction and as well as the context ie where the actual translation unit is as well as the particular line number so that's good we now have this file but it doesn't really help us at the moment because we aren't translating that to another language let's say now we have a translator and we want to give this file to the translator and we want to provide them with some information that helps them translate the message so let's head back over to our component to HTML and inside of here we want to add the title for the under construction cards and we'll did the same for the bottom but this time it will be the description when it comes to your components and actually each individual elements advise you to really get deep as to how you can make the meaning of this be important so that you can give a decent description to whoever's translating it so this here is the description I used the word meaning a moment ago but we'll look at how we can add meaning once more with the pipe so let's add a pipe before this on both statements now we can add a meaning so this would be card description and this one will be card header now this really wouldn't scale well because anytime we have the same meaning it will come out to effectively be the same translation so you want to make sure that your meaning prior to the description really matches the meaning of the content but for our intents and purposes everything is just okay so now let's add an ID and by adding an ID we can enforce persistence when we generate our translations so that's done by adding two ad signs so we have this here at construction header and we'll do the same for the description which would be construction description like so so I've changed quite a bit let's now build our translations once again let's are on NPM run int extract so inside of messages dot X left you can see that we have translations with a description and meaning but at the moment we'll only targeting that n us locale let's head over to package JSON and update our script so we can start looking in other locales inside of our into extract script let's put an output path equal to locale then let's run our NPM run into extract at once again and now you can see we have this locale with messages diox laughs delete the first version that we created earlier and inside of here you want to copy and you want to paste that over the top so now we have messages one dot X lef let's change that to be messages dot F r dot X laughs and do it once more for messages dot de so let's start off with the French version of our app what we want to do is we have this source here and that has under construction we want to add another thing called target so I had this tag underneath which says target and that should be the translation so I've added the French version of this here now this was done with Google Translate because my French skills and German skills aren't quite up to scratch so let's do the same for this page is under construction so hopefully you can see now we have two targets for that source so anytime we see that source it will replace it with this target inside of the french version of the application let's go ahead over to messages de don XLF and we can copy this before if you want and paste it over the top and we'll head over to the first target and we'll change that to the German version and finally the second target for the construction description so hopefully you can tell me in the comments section below whether this is correct or not not even gonna attempt to see it so that's our translations here in Germany too so we now have two versions of our application when it comes to thinking about our translations we can use the CLI over at angularjs on and we can change this configuration file to build a separate project per translation so I will admit there's quite a bit inside of this file and we need a head over to projects angular int and then we want to scroll down to architect build and once again scroll down to configurations and here we have the configurations for our app this is when we build the application we can make various different decisions such as here we see production and that does things like optimize the build we have no source Maps we're extracting the CSS and so on to make this easier to read for us I'm going to get rid of that for now and then underneath we're going to parts an fr with an object and a de with an object these are going to be relatively similar we want to use ahead of time compilation for both so that's part true we want to put the output path equal to dist slash under c FR so this will be your application but then we want to put the dash FR and this allows us to determine what is the french build and what isn't we want to set the I 18 file so the i18n file is equal to source locale messages don't FR dot XLS we want to set the I 18 to format to ex-life the I 18 locale to Fr and finally if there are any missing translations we want to Ora you don't have to add this here at the moment I wouldn't advise it if you're just adding translations into your app essentially this just makes your apps work on for - having all translations and if there aren't a particular translation you'll see an aura for that let's copy-paste this I'm using shift and the arrow keys to go up and down and then we'll go down to de we'll paste that in and anytime we see Fr we want to change that for de so those three times at this point we've now set it so that the angular CLI can build our project for de and F are as well as our standard NUS but I'd like to make a serve option which does a similar thing so let's head down to serve and configurations and we'll set an fr and we'll copy this browser Targa just above just makes it easier for us and instead of building for production we want to build for fr and finally we'll do the same for de and this time it will build for de let's now head back over to our package don't JSON inside of here we can add some different scripts such as start fr that will run ng serve with the configuration equal to Fr we'll do the same here for de and then we can do the same for the build so I'm going to copy this start head down to build say build fr build de and will replace serve with build now we're a stage given the fact that was set up our configuration to test the app inside of the terminal so open up the terminal inside of es chords or simply use one outside of it and we've already got the project running so that's on 4200 so we want to run npm run start call on FR we want to put two dashes and that will allow us to past the port at 42 or one then we'll open up another terminal window and we'll run npm run a start call on de two dashes and then two dashes again for the port pointing out at four two zero two and then if we open up for all of our applications inside of the browser you should be able to see under construction in a variety of different locales so there we have it that's our application using English French and German I'd love to know what you think about this inside of the comments section below don't forget to hit that subscribe button to stay updated with more content and until next time I'll see you very soon in my next video

Channel: developer.school

Views: 30,615

Rating: 4.8485522 out of 5

Keywords: i18n, angular i18n, angular internationalization, internationalization, angular how to use i18n, angular ngx translate, angular translations, angular localization howto, angular locale, multiple languages angular

Id: 88hE8_M53SA

Length: 15min 41sec (941 seconds)

Published: Sat Apr 13 2019