Roland Oldengarm - Independent IT Contractor

Living in the coolest little capital Wellington, New Zealand!

How we have made our Angular 2 website multi-language

I’m part of the startup YouJustGo and we are currently targeting the Chinese market. Our site is built in Angular 2 and we wanted to have our site in two languages, English and Chinese. I’ve done most of the technical work in this space, to get the site working in both languages, and I would like to share my experience.

I’ve written a blog post about this before, but things have changed since then. There are a couple of important considerations when it comes to i18n with Angular 2:

  • Performance: Angular 2 can run in JIT or AOT mode. We are using Angular CLI, and initially AOT was not supported. However, i18n with JIT in Angular 2 is very, very slow. Bootstrap time of our application in JIT was about 8 seconds (!). Angular CLI + i18n + AOT is now supported, bootstrap time is about 1 second.
  • XLF or XMB: Angular 2 generates an XLF or XMB file, based on your templates. The default is XLF, but we ended up using XMB as that worked better with markup inside elements marked with the i18n attribute.
  • Translation tool: You will need a proper translation tool to manage the XLF / XMB files. I’ve done a lot of research, tried a lot of different tools, and we ended up using TextUnited. That tool automatically keeps a dictionary of previously translated elements, so I just upload a new English file and it automatically matches previously translated Chinese elements. We only have to translate the new/updated elements.
    Plus, that was the only tool I found that worked well with (big) HTML blocks marked with i18n. Other tools did funny things to the HTML, but XMB + TextUnited did the trick. If you want to use it this way, you will have to configure something in their desktop tool. If you’re interested, mail me, TextUnited support, or leave a comment.
  • Scripts: While Angular 2 offers i18n tooling, there is quite some scripting required:
    • Generate XMB/XLF files for each translation: I’ve got a Gulp task that extracts the XMB file, copies that to /i18n/messages-en.xmb, merges it with the Chinese version, and as a last step it generates XTB files from the XMB files.
    • Build process: With AOT (please don’t try to use JIT + i18n as per above), the translations are baked into the template at build time, not at compile time. So you need to create a build per language, plus you need a landing page that redirects the user to the right language build.
      I’ve created a set of NPM scripts that does all of this.

Our workflow now looks like this:

  • When an existing element with an i18n attribute is modified, or when a new element is added, we run our “i18n-build” gulp script.
  • The generated XMB file is uploaded to a new project in TextUnited
  • My Chinese colleague translates the new items
  • An XMB file with the translations is downloaded, and saved as messages-zh.xmb
  • The same “i18n-build” script is run, to update the XTB file
  • It is checked into TFS, that kicks of the “npm build” script, which generates the AOT build per language.

If you are interested in either of these resources, please let me know.

5 Comments

  1. It’s look very nice

  2. What is an XTB file and why do you need it? Why are different files for different languages merged?

    • rolandoldengarm

      April 6, 2017 at 8:43 am

      Angular expects an XTB file as input. It’s almost the same as an XMB file, but with different tags.
      I am not merging files for different languages anymore. I always upload the latest English version to Text United, and it will automatically apply previous translations based on their dictionary.

  3. I have been looking for a solid i18n with angular cli workflow for a german translation. However, i couldnt find a single post which worked till now, as most is with a custom webpack / systemJS approach. Since i have made use of the angular-cli , i wanted to continue that as well. If you have a sample to share , kindly send it at harikrishkk@gmail.com / a gituhub link to the repo if you dont mind! that will be quite helpful.!! Have been struggling with this for days.

Leave a Reply

Your email address will not be published.

*