Tutorial for using xliffmerge with angular cli

WORK IN PROGRESS

Just started writing, will delete this lines when finished.

Start a new project

If you haven't done it at all, install angular-cli globally:

npm install -f @angular/angular-cli@latest

Then you can create a new project:

ng new sampleapp

cd sampleapp

Change the app, so that it uses some texts that need translations

For this tutorial we assume, that your preferred language is not English, but something else, e.g. German. So what you want to write your application in German and translate it to English later.

So as a first step we change our application to German and additionally mark all text, that needs translation, with an i18n-Attribute (for details have a look at the Angular Cookbook about Internationalization).

Our application.html now looks like this:

<h1 i18n>Meine erste I18N-Anwendung</h1>
<p i18n>Anwendung läuft!</p>

Try running it (ng serve or npm run start), fix the test cases, if you want (they test for 'app works!' and will fail after the change).

Generate a messages.xlf file

After the changes made, the application now contains some i18n marked stuff and so you can extract this stuff for translation. angular-cli has a task for this (since 1.0.0-rc-0, i guess), so you can just type

ng extract