Angular2 and webpack - i18n plugin vs ng2-translate
I got it working with webpack using the cookbook. The xliff file has to be converted to ts like so:
export const TRANSLATION_SV = `<?xml version="1.0" encoding="UTF-8" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> <file source-language="en" datatype="plaintext" original="ng2.template"> <body> <trans-unit id="a73e2898b9e1126ed19dbabe4b5c3715a84db61a" datatype="html"> <source>Category</source> <target>Kategori</target> </trans-unit> </body> </file></xliff>`;Then in the main.ts it has to be added
import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';import { TRANSLATION_SV } from './locale/messages.sv';and inserted to the bootstrap step:
platformBrowserDynamic().bootstrapModule(AppModule, { providers: [ {provide: TRANSLATIONS, useValue: TRANSLATION_SV}, {provide: TRANSLATIONS_FORMAT, useValue: "xlf"}, {provide: LOCALE_ID, useValue:'sv'} ];});
If you are using angular-cli you can follow these steps:
Be aware that your app must be AOT compatibe, so you should be able to build it with
--aotswitch:ng build --aot
Extract messages with
ng xi18ncommand with location for translation file given:ng xi18n --output-path src/i18nYou will get
src/i18n/messages.xlffile. Copy this file and translate messages to languages you need:src/i18n/messages.en.xlfsrc/i18n/messages.pl.xlfServe/build your app with
ng serve / ng buildcommand (change locale accordingly):ng serve --i18n-file=src/i18n/messages.en.xlf --locale=en --i18n-format=xlf --aot
in case someone still wondering how to use angular 2 localization with webpack loader, i have modified the provider angular 2 cookbook provided;
First create i18n.provider.ts
import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';import { Observable } from "rxjs/Rx";export function getTranslationProviders(): Promise<Object[]> { // Get the locale id from the global const locale = document['locale'] as string; // return no providers if fail to get translation file for locale const noProviders: Object[] = []; // No locale or U.S. English: no translation providers if (!locale || locale === 'en') { return Promise.resolve(noProviders); } // Ex: 'locale/messages.fr.xlf` const translationFile = `./src/app/localezation/messages.${locale}.xlf`; var provider = getTranslationsWithSystemJs(translationFile) .then((translations: string) => [ { provide: TRANSLATIONS, useValue: translations }, { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }, { provide: LOCALE_ID, useValue: locale } ]) .catch(() => noProviders); // ignore if file not found debugger; return provider;}declare var System: any;function getTranslationsWithSystemJs(file: string) {// changes Start here var text = ""; var fileRequest = new XMLHttpRequest(); fileRequest.open("GET", file, false); fileRequest.onerror = function (err) { console.log(err); } fileRequest.onreadystatechange = function () { if (fileRequest.readyState === 4) { if (fileRequest.status === 200 || fileRequest.status == 0) { text = fileRequest.responseText; } } } fileRequest.send() var observable = Observable.of(text); var prom = observable.toPromise(); return prom; }notice the changes are :
- i used jxjs library to create observable/ promise
- i used XMLHttpRequest to get the localezation files
Secondin the main.ts files change the bootstrapping the same as mentioned in angular cookbook
getTranslationProviders().then(providers => { const options = { providers }; platformBrowserDynamic().bootstrapModule(AppModule, options);});