1
00:00:03,910 --> 00:00:06,060
Hello, everyone, and welcome back.

2
00:00:06,340 --> 00:00:11,770
In these listen, we are going to go over the translation workflow, we are going to simulate the situation

3
00:00:11,770 --> 00:00:16,600
where our messages file has been sent for a translator and we got it back.

4
00:00:16,600 --> 00:00:20,790
So we are going to display our translated application in this lesson.

5
00:00:20,800 --> 00:00:27,170
So far in this course, we have been generating our messages file, using the following commands, engie

6
00:00:27,220 --> 00:00:33,790
extract eatin' N. So if we open here, the messages file, we are going to see that the language of

7
00:00:33,790 --> 00:00:36,450
this file is marked as being in English.

8
00:00:36,520 --> 00:00:38,310
So this is just a default.

9
00:00:38,470 --> 00:00:43,330
We were writing our text here in English, so this happens to be correct.

10
00:00:43,330 --> 00:00:49,450
But if the text in your application is in the language other than English, you want to have that reflected

11
00:00:49,450 --> 00:00:50,620
here on the message.

12
00:00:50,620 --> 00:00:52,130
Is that excellent file.

13
00:00:52,180 --> 00:00:59,620
So in order to do that, you are going to specify the eatin' n that local property of the angular clay

14
00:00:59,620 --> 00:01:00,790
extraction command.

15
00:01:00,790 --> 00:01:05,730
And we are going to identify the language code of the text that you are extracting.

16
00:01:05,740 --> 00:01:12,250
Let's imagine that our application was written in French, meaning that here in our application component,

17
00:01:12,400 --> 00:01:15,070
this text would be, for example, in French.

18
00:01:15,190 --> 00:01:21,220
If we would like to generate a file that clearly identifies that we would execute this command.

19
00:01:21,220 --> 00:01:26,800
And after a moment, if we respect here to the contents of the messages that Excel file, we are going

20
00:01:26,800 --> 00:01:30,960
to see that the source language is indeed marked as French.

21
00:01:30,970 --> 00:01:36,400
So if your application is not written in English, this is how you can generate the correct file.

22
00:01:36,520 --> 00:01:39,850
However, in our case, our application is written in English.

23
00:01:39,850 --> 00:01:45,910
So let's switch this back to English and continue the simulation of the rest of the process.

24
00:01:46,120 --> 00:01:52,630
So now at this point, what we will do is we will take this extraction file and we would send it either

25
00:01:52,630 --> 00:01:58,810
via email or via Dropbox, etc., or even via an online web application.

26
00:01:58,810 --> 00:02:05,920
We would send this to a third party company or a translation department inside our own company, and

27
00:02:05,920 --> 00:02:08,280
they would receive the messages file.

28
00:02:08,410 --> 00:02:14,440
They would then upload these messages file on the system that would make it easier for them to perform

29
00:02:14,440 --> 00:02:15,400
the translation.

30
00:02:15,400 --> 00:02:20,180
So the translator is not going to work directly here with the XML file.

31
00:02:20,230 --> 00:02:27,460
This is just a data format for exchanging data between our development environment and the translators

32
00:02:27,460 --> 00:02:28,950
work environment.

33
00:02:29,140 --> 00:02:35,590
Once the translation process is completed, we are going to get back a translated file and we will place

34
00:02:35,590 --> 00:02:40,810
it here in our file system under the following location, under the source folder.

35
00:02:40,840 --> 00:02:42,930
We are going to create here a new folder.

36
00:02:43,060 --> 00:02:48,550
We are going to call it local and we are going to place inside it all translated file.

37
00:02:48,570 --> 00:02:52,870
So one application can be potentially translated into many languages.

38
00:02:52,900 --> 00:02:58,150
The file that we would receive would be very similar to the messages that Excel file.

39
00:02:58,180 --> 00:03:02,280
Let's copy it in here and change its extension.

40
00:03:02,290 --> 00:03:07,330
The extension would reflect the language onto which the file was translated.

41
00:03:07,450 --> 00:03:13,780
So we would receive here a file with the following name, a very similar content to what we have here.

42
00:03:13,900 --> 00:03:20,230
The source language would still be marked as English, but now we will get here a file that would contain

43
00:03:20,230 --> 00:03:26,200
not only the source of its text, but also the text translation.

44
00:03:26,200 --> 00:03:28,350
And let's give here a concrete example.

45
00:03:28,360 --> 00:03:34,930
Let's go here to our simplest translation unit, which is the title that we can see here displayed on

46
00:03:34,930 --> 00:03:35,540
the screen.

47
00:03:35,680 --> 00:03:37,270
Welcome to the Angular Code.

48
00:03:37,690 --> 00:03:44,680
Of course, this text would be translated in the following way by adding here at target tag inside the

49
00:03:44,680 --> 00:03:48,970
target tag we would get here the translation of the text.

50
00:03:49,120 --> 00:03:53,660
In this case, the translation to French would look something like this.

51
00:03:53,890 --> 00:04:00,250
Notice that the translator is not going to simply take each of the source words and translate them one

52
00:04:00,250 --> 00:04:00,850
by one.

53
00:04:00,940 --> 00:04:06,370
So the translator is going to change the word order and it's going to use terms that make sense on the

54
00:04:06,370 --> 00:04:07,360
target language.

55
00:04:07,570 --> 00:04:11,950
The translator would then proceed to translate the rest of the file.

56
00:04:12,070 --> 00:04:18,910
So for each source tag, the output of the translator would also have here at Target Day, for example,

57
00:04:18,910 --> 00:04:25,330
here in the translation of our alternative expression for the category of the course we will have here

58
00:04:25,330 --> 00:04:28,630
in parenthesis the corresponding translation.

59
00:04:28,810 --> 00:04:34,150
Let's now repeat the same process for the remaining text that need to be translated.

60
00:04:34,180 --> 00:04:40,080
We are missing here to the translation of the edit course label that I'm going to paste here.

61
00:04:40,270 --> 00:04:46,180
So now we are only missing the translation here of this plural expression.

62
00:04:46,360 --> 00:04:53,290
So I'm going to quickly paste in here the translation of this expression in order to simulate the translation

63
00:04:53,290 --> 00:04:53,980
process.

64
00:04:53,990 --> 00:04:59,920
So now the translator has finished the translation in his user interface, and it has.

65
00:05:00,530 --> 00:05:07,280
An extract and has generated here the Excel file now in some cases, the translator is going to send

66
00:05:07,280 --> 00:05:10,680
you this file by email, but this could also be automated.

67
00:05:10,820 --> 00:05:17,870
The translator could submit this to a Web application and your own built system could fetch the translated

68
00:05:17,870 --> 00:05:21,040
result via an API call, for example.

69
00:05:21,050 --> 00:05:28,620
Still, in many cases, the translation files are simply sent by email or Dropbox or something equivalent.

70
00:05:28,730 --> 00:05:30,740
So let's assume that that would be the case.

71
00:05:30,740 --> 00:05:36,380
We got here a new file with the translation and we would simply copied here to our file system.

72
00:05:36,620 --> 00:05:42,820
We should put the translations file under source control once we have this file in place.

73
00:05:42,830 --> 00:05:49,100
All we have to do now is to configure the angular CLIA in order to build our application using this

74
00:05:49,100 --> 00:05:49,550
file.

75
00:05:49,580 --> 00:05:55,910
Let's head over here to our angular dodges and file and let's set up the configuration of the French

76
00:05:55,910 --> 00:05:57,800
version of our application.

77
00:05:57,980 --> 00:06:03,200
We're going to search here inside this file by the configurations property.

78
00:06:03,320 --> 00:06:09,060
So we have here a configuration here for production and we have here also engy server.

79
00:06:09,230 --> 00:06:12,220
So we have found here our configurations entry.

80
00:06:12,320 --> 00:06:18,860
Now, what we are going to do is we are going to add here an extra configuration below production.

81
00:06:18,860 --> 00:06:24,110
We are going to collapse it and we're going to arrive here, an extra configuration entry.

82
00:06:24,200 --> 00:06:29,450
We are going to name it according to the language that we are translating our application to, in this

83
00:06:29,450 --> 00:06:30,380
case, French.

84
00:06:30,380 --> 00:06:36,440
And we are going to add here some configuration for handling our message messages file.

85
00:06:36,590 --> 00:06:40,890
I'm going to paste the configuration in and we're going to review it together.

86
00:06:41,000 --> 00:06:46,460
So in this case, we are building our application in ahead of time mode as usual.

87
00:06:46,460 --> 00:06:48,710
So we are going to set this flat here to true.

88
00:06:48,710 --> 00:06:55,730
And we're going to specify here the output built path onto which our application builds using the French

89
00:06:55,730 --> 00:06:59,080
text is going to be made available in the file system.

90
00:06:59,090 --> 00:07:05,480
So as you can see in ahead of time mode, what is happening is that the language text is getting applied

91
00:07:05,480 --> 00:07:08,540
to the application at application build time.

92
00:07:08,540 --> 00:07:14,600
We are going to have here multiple versions of our application, one per language, and then our server

93
00:07:14,600 --> 00:07:20,480
is going to have to serve these different versions according to either user preferences or according

94
00:07:20,480 --> 00:07:27,260
to some detection algorithm that is going to, for example, detect the region where the user is calling

95
00:07:27,260 --> 00:07:28,180
our server.

96
00:07:28,310 --> 00:07:33,760
Once we have here our output path, we are going to specify what is the message is file that we need.

97
00:07:33,890 --> 00:07:34,610
In this case.

98
00:07:34,610 --> 00:07:41,350
It's our message is not F.R. that Excel file available here in our local folder.

99
00:07:41,510 --> 00:07:43,880
We are going to specify the format of the file.

100
00:07:44,030 --> 00:07:51,050
So the angular CLI supports multiple formats other than Excel itself being the most common and the default

101
00:07:51,050 --> 00:07:51,410
one.

102
00:07:51,470 --> 00:07:53,350
So this is an Excel file.

103
00:07:53,390 --> 00:07:57,970
We're going to specify the local of the file, which is present here in the extension.

104
00:07:57,980 --> 00:08:05,510
It's the French locale and we are going to specify if we want our build to fail or not in case the translation

105
00:08:05,510 --> 00:08:06,330
is missing.

106
00:08:06,560 --> 00:08:07,930
So this is a good idea.

107
00:08:07,940 --> 00:08:12,410
We don't want to send to production and incomplete retranslated application.

108
00:08:12,410 --> 00:08:18,620
So we are going to set by default this flag here to occur so that our build fails.

109
00:08:18,620 --> 00:08:24,380
If we have a missing translation, we're going to see this in action in a moment right now before triggering

110
00:08:24,380 --> 00:08:25,460
the production build.

111
00:08:25,460 --> 00:08:30,760
It would be great to already see the application in French, but in development mode.

112
00:08:30,770 --> 00:08:36,919
So for that, we are going to need to add here a new sort of task inside the of task we have here,

113
00:08:36,919 --> 00:08:40,760
the configurations entry and below here, the production entry.

114
00:08:40,760 --> 00:08:43,190
We're going to add here a new task.

115
00:08:43,190 --> 00:08:46,010
We are going to call it with the name of the language.

116
00:08:46,010 --> 00:08:50,480
And we are going to specify here the browser Target property.

117
00:08:50,660 --> 00:08:57,080
These browser Target property is going to specify what build should be triggered when we are serving

118
00:08:57,080 --> 00:08:57,860
the application.

119
00:08:57,880 --> 00:09:04,190
So in this case, we are pointing to our build here, which is under the build property and then our

120
00:09:04,190 --> 00:09:08,900
project angular course, and it's the F r build delegates.

121
00:09:08,940 --> 00:09:12,950
So as you can see, this is the built target that we have specified here.

122
00:09:13,010 --> 00:09:18,160
And with this in place, we are ready to serve our application in an alternative language.

123
00:09:18,260 --> 00:09:22,190
Let's head over here to the terminal and we're going to run the following command.

124
00:09:22,190 --> 00:09:29,780
We are going to run engy set of minus minus configuration and we are going to assign here the F r configuration.

125
00:09:29,790 --> 00:09:35,350
This is going to trigger here this configuration that is going to serve the application using this built

126
00:09:35,350 --> 00:09:35,930
derogate.

127
00:09:35,960 --> 00:09:37,010
Let's try this out.

128
00:09:37,010 --> 00:09:39,380
We are going to start here, our server.

129
00:09:39,470 --> 00:09:43,370
And already at this stage, after a moment, we are going to get here.

130
00:09:43,370 --> 00:09:47,860
And er apparently there was a missing translation here in the file.

131
00:09:47,900 --> 00:09:53,870
This is a great feature to have in production, but in this case we would like to quickly see the application,

132
00:09:53,870 --> 00:09:59,260
even though there is a translation missing so we can also set to this parameter to ignore.

133
00:09:59,300 --> 00:09:59,660
Let's.

134
00:09:59,810 --> 00:10:05,600
I'll switch again here to the command line and we're going to run our application using the same command,

135
00:10:05,630 --> 00:10:08,930
after a moment, our server is going to be up and running.

136
00:10:08,930 --> 00:10:14,360
And as we reload the application, we are going to see that indeed the application is now translated

137
00:10:14,360 --> 00:10:16,200
to French as expected.

138
00:10:16,340 --> 00:10:20,780
So this is how we serve the translators application in development mode.

139
00:10:20,780 --> 00:10:26,350
If we will now need the application in production mode, we can obtain it by running the following commands.

140
00:10:26,360 --> 00:10:28,430
We're going to run engy build again.

141
00:10:28,430 --> 00:10:33,710
We are going to use the minus minus configuration option and we're going to specify that we want the

142
00:10:33,710 --> 00:10:38,800
French version of the application and we are going to adhere to the production flag.

143
00:10:38,870 --> 00:10:45,210
This is going to trigger the production build and the build is going to get outputted here on this folder.

144
00:10:45,230 --> 00:10:51,230
This angular discourse that F.R. After a moment, our build is going to be completed.

145
00:10:51,240 --> 00:10:54,860
So let's have a look here at the production version of the application.

146
00:10:54,860 --> 00:11:00,310
Here we have it inside that this folder we have here, the French version of the application.

147
00:11:00,320 --> 00:11:06,350
So in the case of an application with the multiple languages, you would want to build each different

148
00:11:06,500 --> 00:11:10,670
language version separately and you want to ship them all to prolix.

149
00:11:10,670 --> 00:11:17,330
And then your server is going to have to decide which version of the application to serve, depending

150
00:11:17,330 --> 00:11:21,420
on user preferences or a language detection algorithm.

151
00:11:21,440 --> 00:11:26,450
And with this, we have reached the end of the section on angular internationalization.

152
00:11:26,450 --> 00:11:33,590
As you can see, angular and the angular clay has some really powerful features for supporting translation

153
00:11:33,590 --> 00:11:35,030
in every language.

154
00:11:35,210 --> 00:11:38,300
Next, we are going to cover another angular feature.

155
00:11:38,310 --> 00:11:40,640
We are going to talk about angular elements.