{"id":273,"date":"2020-10-02T11:10:47","date_gmt":"2020-10-02T09:10:47","guid":{"rendered":"https:\/\/fileidea.com\/?p=273"},"modified":"2020-10-19T18:40:07","modified_gmt":"2020-10-19T16:40:07","slug":"having-multiple-languages-in-an-angular-10-app","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2020\/10\/02\/having-multiple-languages-in-an-angular-10-app\/","title":{"rendered":"Having multiple languages in an Angular 10 app"},"content":{"rendered":"\n

There was not too long ago a nice little blog article about how Angular have improved the localization system here<\/a> so I thought I’d take a look on the Angular localization. In my application I am going to add Japanese as a second language on top of English. Note that I am using a existing project and not creating a new one. Angular also have a good tutorial on most of it here<\/a> which I am using as a reference. If you need language codes and don’t wanna do Japanese like I am you can visit this page<\/a> and find your language codes that you want to use. Japanese is pretty easy because it uses just “ja”, and not like “en-US” you have to do with English. <\/p>\n\n\n\n

Alright let’s get started! First of all, let’s install the needed localize package into your Angular project. I do use Angular 10 here.<\/p>\n\n\n

\nng add @angular\/localize\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
When that is done we are ready to proceed. Also, good to know is that default language is English as stated in the documentation<\/a>: Angular by default uses en-US (English in the United States) as your app’s source locale.<\/em><\/p>\n\n\n\n
We now need to prepare where and what texts in our application that we want to translate. You do this by the i18n<\/strong> attribute. For example, I have an h3<\/strong> element here which my current text is “Main Menu”. I am going to make this use the translation package by adding i18n to it. like this.<\/p>\n\n\n
\n<h3 i18n>Main Menu<\/h3>\n<\/pre><\/div>\n\n\n
We can specify meaning <\/em>information about this element like this. I am adding Main menu here to the i18n attribute.<\/p>\n\n\n
\n<h3 i18n="site menu">Main Menu<\/h3>\n<\/pre><\/div>\n\n\n
You can also go a step further to add description <\/em>like this.<\/p>\n\n\n
\n <h3 i18n="site menu|This menu is the main menu used for all main pages">Main Menu<\/h3>\n<\/pre><\/div>\n\n\n
That way, any text marked with site menu<\/strong> as the meaning will be translate the same way. Left side is meaning and the right side of the | is description. Now we also would like to use an custom ID which we will use in the translation file for later, so the element gets can ID by having two at signs like this @@ then the ID you declare, in my case my custom ID is SiteMainMenu<\/strong>:<\/p>\n\n\n
\n<h3 i18n="site menu|This menu is the main menu used for all main pages@@SiteMainMenu">Main Menu<\/h3>\n<\/pre><\/div>\n\n\n
Another thing to keep in mind but which I am not going to translate now, is that if you want to translate an attribute, not just a simple string in an element, you must use the i18n then the attribute you are translating like this:<\/p>\n\n\n
\n<img [src]="fileidea-logo" i18n-title title="Fileidea have great tutorials and information about so much things it's amazing" \/>\n<\/pre><\/div>\n\n\n
So above to translate the title, we use i18n-title<\/strong>.<\/p>\n\n\n\n
Still unsure what meaning and description is for, it is all for the transaltor<\/strong>. See quote:<\/p>\n\n\n\n
The translator may also need to know the meaning or intent of the text message within this particular app context, in order to translate it the same way as other text with the same meaning. Start the i18n<\/code> attribute value with the meaning<\/em> and separate it from the description<\/em> with the |<\/code> character: <meaning>|<description><\/code>.<\/p>
For example, you can add the meaning that this <h1><\/code> tag is a site header that needs to be translated the same way not only when used as a header, but also when referred to from another section of text:<\/p>https:\/\/angular.io\/guide\/i18n#help-translator<\/cite><\/blockquote>\n\n\n\n
Where do I write my translations?<\/h3>\n\n\n\n
Okay cool, we got it how to make our Angular html templates ready for some translations with the i18n attribute and are ready to write translations. And where you do that is by first creating such file with the command ng xi18n<\/strong>. This command will create a file that contains things we want to translate.<\/p>\n\n\n\n
To set things up, we will run this command with output path in a locale folder, the filename as my desired name and set the format till the default xlf2. The name of the file should have an name that matches the language locale you are translating for. So something like this: messages.jp<\/strong>.xlf in my case. For french it would be messages.fr<\/strong>.xlf for example and so forth. So run the command:<\/p>\n\n\n
\nng xi18n --output-path src\/locale --out-file messages.ja.xlf --format=xlf2ng xi18n --output-path src\/locale --out-file messages.ja.xlf --format=xlf2\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
The command creates a new file for our new language. Great, we are now ready to write translations! Using the trans-units <\/strong>we will declare pure texts of elements that we want to translate, our <h3> <\/strong>element for example! So let’s go ahead and implement this for our h3 Main Menu<\/strong> text.<\/p>\n\n\n\n
First off, we must define what is going to be translated. Do first like this to say “this is what needs to be translated”:<\/p>\n\n\n
\n            <trans-unit id="SiteMainMenu" datatype="plaintext">\n                <source>Main Menu<\/source>\n                <target>\u30e1\u30a4\u30f3\u30e1\u30cb\u30e5\u30fc<\/target>\n                <note priority="1" from="description">This menu is the main menu used for all main pages<\/note>\n                <note priority="1" from="meaning">site menu<\/note>\n            <\/trans-unit>\n<\/pre><\/div>\n\n\n
We set an ID here, along with source which is what we want to translate along with the description and meaning data to keep the translator informed. Then when it has been translated the whole document looks like this:<\/p>\n\n\n
\n<?xml version="1.0" encoding="UTF-8" ?>\n<xliff version="1.2"\n    xmlns="urn:oasis:names:tc:xliff:document:1.2">\n    <file source-language="en" datatype="plaintext" original="ng2.template">\n        <body>\n            <trans-unit id="SiteMainMenu" datatype="plaintext">\n                <source>Main Menu<\/source>\n                <target>\u30e1\u30a4\u30f3\u30e1\u30cb\u30e5\u30fc<\/target>\n                <note priority="1" from="description">This menu is the main menu used for all main pages<\/note>\n                <note priority="1" from="meaning">site menu<\/note>\n            <\/trans-unit>\n        <\/body>\n    <\/file>\n<\/xliff>\n\n<\/pre><\/div>\n\n\n
What changed is that target <\/strong>has been added which contains the (Japanese) translation. Now there are tons of more information in the documentation about how to build your app into a different language etc, but I am interested on how we see our app in the Japanese language without too much hassle. So let’s fix some configurations so it can be used in Japanese!<\/p>\n\n\n\n
Open up your angular.json file and add just above architect under your project name:<\/p>\n\n\n
\n"i18n": {\n        "sourceLocale": "en-US",\n        "locales": {\n          "ja": "src\/locale\/messages.ja.xlf"\n        }\n },\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
Okay now with the angular.json<\/strong> your app knows it got some more than the English locale that it can use. Then I am going to add this under configurations for “serve”.<\/p>\n\n\n
\n"jp": {\n    "browserTarget": "schooUi:build:jp"\n}\n\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
Then do the same for the build so we can choose to update the localization when we use ja for build too.  <\/p>\n\n\n
\n"ja": {\n              "localize": ["ja"]\n            },\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
Now if you wanna build with localize all the time, simply type in: “localize”: true<\/strong> in your angular.json file under “options” -> “build” -> “architect” (under your project app name).<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
If you simply don’t like setting the configurations each time when serving or building you could “hard code” the LOCALE_ID into the providers under the app.module.ts file. However, I will not do this because I am using the jp configuration<\/strong> instead.<\/p>\n\n\n
\n    { provide: LOCALE_ID, useValue: 'jp' } ]\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
NgModules providers <\/strong>looks like above.<\/p>\n\n\n\n
Alright let’s try out the ng build with localize (because we have “localize”: true under build in angular.json<\/strong>)! Type: <\/p>\n\n\n
\nng build\n<\/pre><\/div>\n\n\n
If you do not use localize true<\/strong>, then type: ng build –localize. That way we are building our app for all of our languages, and in my case, it will go through both English and Japanese. We can visit our dist folder <\/strong>to see it actually exists.<\/p>\n\n\n\n
\"\"
Two folders, one en-US and one ja after ng build<\/figcaption><\/figure>\n\n\n\n
Problem I had on the way<\/h3>\n\n\n\n
You can skip this part but just for documentation, I had some strange problems on the way, one was the following.: Module parse failed: Unexpected token (1:0). You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. <\/strong><\/p>\n\n\n\n
I fixed it by updating the acorn package and deleting and installing all packages again: <\/p>\n\n\n\n