What are the four phases of template translation?

The i18n template translation process has four phases:

1. Mark static text messages in your component templates for translation: You can place i18n on every element tag whose fixed text is to be translated. For example, you need i18n attribue for heading as below,

   <h1 i18n>Hello i18n!</h1>

2. Create a translation file: Use the Angular CLI xi18n command to extract the marked text into an industry-standard translation source file. i.e, Open terminal window at the root of the app project and run the CLI command xi18n.

   ng xi18n

   The above command creates a file named messages.xlf in your project's root directory.

   Note: You can supply command options to change the format, the name, the location, and the source locale of the extracted file.

3. Edit the generated translation file: Translate the extracted text into the target language. In this step, create a localization folder (such as locale)under root directory(src) and then create target language translation file by copying and renaming the default messages.xlf file. You need to copy source text node and provide the translation under target tag. For example, create the translation file(messages.de.xlf) for German language

   <trans-unit id="greetingHeader" datatype="html">
     <source>Hello i18n!</source>
     <target>Hallo i18n !</target>
     <note priority="1" from="description">
       A welcome header for this sample
     </note>
     <note priority="1" from="meaning">
       welcome message
     </note>
   </trans-unit>

4. Merge the completed translation file into the app: You need to use Angular CLI build command to compile the app, choosing a locale-specific configuration, or specifying the following command options.

   1. --i18nFile=path to the translation file
   2. --i18nFormat=format of the translation file
   3. --i18nLocale= locale id