Using the JiT Compiler

The JiT (Just-in-time) compiler compiles the application dynamically, as the application loads. To do this, we will need to rely on 3 providers that tell the JiT compiler how to translate the template texts for a particular language:

• TRANSLATIONS is a string containing the content of the translation file.
• TRANSLATIONS_FORMAT is the format of the file.
• LOCALE_ID is the locale of the target language.

Here's how to boostrap the app with the translation providers for French. We're assuming the translation file is messages.fr.xlf.

app/index.ts:

import { NgModule, TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Hello } from './app.component.ts';

// Using SystemJs' text plugin
import translations from './messages.fr.xlf!text';
const localeId = 'fr';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    Hello
  ],
  bootstrap: [ Hello ]
})
export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    { provide: TRANSLATIONS, useValue: translations },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
    { provide: LOCALE_ID, useValue: localeId }
  ]
});

View Example

We're using SystemJS text plugin to import raw xlf files. We could alternately use webpack and raw-loader to achieve the same effect. Better yet, we could make an http call based on which language we're interested in, and asynchronously bootstrap the app once its loaded.