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 pluginimport 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.