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.