Hello, everyone, and welcome back.
In these listen, we are going to go over the translation workflow, we are going to simulate the situation
where our messages file has been sent for a translator and we got it back.
So we are going to display our translated application in this lesson.
So far in this course, we have been generating our messages file, using the following commands, engie
extract eatin' N. So if we open here, the messages file, we are going to see that the language of
this file is marked as being in English.
So this is just a default.
We were writing our text here in English, so this happens to be correct.
But if the text in your application is in the language other than English, you want to have that reflected
here on the message.
Is that excellent file.
So in order to do that, you are going to specify the eatin' n that local property of the angular clay
extraction command.
And we are going to identify the language code of the text that you are extracting.
Let's imagine that our application was written in French, meaning that here in our application component,
this text would be, for example, in French.
If we would like to generate a file that clearly identifies that we would execute this command.
And after a moment, if we respect here to the contents of the messages that Excel file, we are going
to see that the source language is indeed marked as French.
So if your application is not written in English, this is how you can generate the correct file.
However, in our case, our application is written in English.
So let's switch this back to English and continue the simulation of the rest of the process.
So now at this point, what we will do is we will take this extraction file and we would send it either
via email or via Dropbox, etc., or even via an online web application.
We would send this to a third party company or a translation department inside our own company, and
they would receive the messages file.
They would then upload these messages file on the system that would make it easier for them to perform
the translation.
So the translator is not going to work directly here with the XML file.
This is just a data format for exchanging data between our development environment and the translators
work environment.
Once the translation process is completed, we are going to get back a translated file and we will place
it here in our file system under the following location, under the source folder.
We are going to create here a new folder.
We are going to call it local and we are going to place inside it all translated file.
So one application can be potentially translated into many languages.
The file that we would receive would be very similar to the messages that Excel file.
Let's copy it in here and change its extension.
The extension would reflect the language onto which the file was translated.
So we would receive here a file with the following name, a very similar content to what we have here.
The source language would still be marked as English, but now we will get here a file that would contain
not only the source of its text, but also the text translation.
And let's give here a concrete example.
Let's go here to our simplest translation unit, which is the title that we can see here displayed on
the screen.
Welcome to the Angular Code.
Of course, this text would be translated in the following way by adding here at target tag inside the
target tag we would get here the translation of the text.
In this case, the translation to French would look something like this.
Notice that the translator is not going to simply take each of the source words and translate them one
by one.
So the translator is going to change the word order and it's going to use terms that make sense on the
target language.
The translator would then proceed to translate the rest of the file.
So for each source tag, the output of the translator would also have here at Target Day, for example,
here in the translation of our alternative expression for the category of the course we will have here
in parenthesis the corresponding translation.
Let's now repeat the same process for the remaining text that need to be translated.
We are missing here to the translation of the edit course label that I'm going to paste here.
So now we are only missing the translation here of this plural expression.
So I'm going to quickly paste in here the translation of this expression in order to simulate the translation
process.
So now the translator has finished the translation in his user interface, and it has.
An extract and has generated here the Excel file now in some cases, the translator is going to send
you this file by email, but this could also be automated.
The translator could submit this to a Web application and your own built system could fetch the translated
result via an API call, for example.
Still, in many cases, the translation files are simply sent by email or Dropbox or something equivalent.
So let's assume that that would be the case.
We got here a new file with the translation and we would simply copied here to our file system.
We should put the translations file under source control once we have this file in place.
All we have to do now is to configure the angular CLIA in order to build our application using this
file.
Let's head over here to our angular dodges and file and let's set up the configuration of the French
version of our application.
We're going to search here inside this file by the configurations property.
So we have here a configuration here for production and we have here also engy server.
So we have found here our configurations entry.
Now, what we are going to do is we are going to add here an extra configuration below production.
We are going to collapse it and we're going to arrive here, an extra configuration entry.
We are going to name it according to the language that we are translating our application to, in this
case, French.
And we are going to add here some configuration for handling our message messages file.
I'm going to paste the configuration in and we're going to review it together.
So in this case, we are building our application in ahead of time mode as usual.
So we are going to set this flat here to true.
And we're going to specify here the output built path onto which our application builds using the French
text is going to be made available in the file system.
So as you can see in ahead of time mode, what is happening is that the language text is getting applied
to the application at application build time.
We are going to have here multiple versions of our application, one per language, and then our server
is going to have to serve these different versions according to either user preferences or according
to some detection algorithm that is going to, for example, detect the region where the user is calling
our server.
Once we have here our output path, we are going to specify what is the message is file that we need.
In this case.
It's our message is not F.R. that Excel file available here in our local folder.
We are going to specify the format of the file.
So the angular CLI supports multiple formats other than Excel itself being the most common and the default
one.
So this is an Excel file.
We're going to specify the local of the file, which is present here in the extension.
It's the French locale and we are going to specify if we want our build to fail or not in case the translation
is missing.
So this is a good idea.
We don't want to send to production and incomplete retranslated application.
So we are going to set by default this flag here to occur so that our build fails.
If we have a missing translation, we're going to see this in action in a moment right now before triggering
the production build.
It would be great to already see the application in French, but in development mode.
So for that, we are going to need to add here a new sort of task inside the of task we have here,
the configurations entry and below here, the production entry.
We're going to add here a new task.
We are going to call it with the name of the language.
And we are going to specify here the browser Target property.
These browser Target property is going to specify what build should be triggered when we are serving
the application.
So in this case, we are pointing to our build here, which is under the build property and then our
project angular course, and it's the F r build delegates.
So as you can see, this is the built target that we have specified here.
And with this in place, we are ready to serve our application in an alternative language.
Let's head over here to the terminal and we're going to run the following command.
We are going to run engy set of minus minus configuration and we are going to assign here the F r configuration.
This is going to trigger here this configuration that is going to serve the application using this built
derogate.
Let's try this out.
We are going to start here, our server.
And already at this stage, after a moment, we are going to get here.
And er apparently there was a missing translation here in the file.
This is a great feature to have in production, but in this case we would like to quickly see the application,
even though there is a translation missing so we can also set to this parameter to ignore.
Let's.
I'll switch again here to the command line and we're going to run our application using the same command,
after a moment, our server is going to be up and running.
And as we reload the application, we are going to see that indeed the application is now translated
to French as expected.
So this is how we serve the translators application in development mode.
If we will now need the application in production mode, we can obtain it by running the following commands.
We're going to run engy build again.
We are going to use the minus minus configuration option and we're going to specify that we want the
French version of the application and we are going to adhere to the production flag.
This is going to trigger the production build and the build is going to get outputted here on this folder.
This angular discourse that F.R. After a moment, our build is going to be completed.
So let's have a look here at the production version of the application.
Here we have it inside that this folder we have here, the French version of the application.
So in the case of an application with the multiple languages, you would want to build each different
language version separately and you want to ship them all to prolix.
And then your server is going to have to decide which version of the application to serve, depending
on user preferences or a language detection algorithm.
And with this, we have reached the end of the section on angular internationalization.
As you can see, angular and the angular clay has some really powerful features for supporting translation
in every language.
Next, we are going to cover another angular feature.
We are going to talk about angular elements.