Angular2 and webpack - i18n plugin vs ng2-translate
Solution 1
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
--aot
switch:ng build --aot
-
Extract messages with
ng xi18n
command with location for translation file given:ng xi18n --output-path src/i18n
-
You will get
src/i18n/messages.xlf
file. Copy this file and translate messages to languages you need:src/i18n/messages.en.xlf src/i18n/messages.pl.xlf
-
Serve/build your app with
ng serve / ng build
command (change locale accordingly):ng serve --i18n-file=src/i18n/messages.en.xlf --locale=en --i18n-format=xlf --aot
Solution 2
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
Second in the main.ts files change the bootstrapping the same as mentioned in angular cookbook
getTranslationProviders().then(providers => {
const options = { providers };
platformBrowserDynamic().bootstrapModule(AppModule, options);
});
Solution 3
Angular 2 Final release has i18n native support https://angular.io/docs/ts/latest/cookbook/i18n.html
Check another answer https://stackoverflow.com/a/39004058/1267942 with example and some details about usage.
ng2-translate is too verbose comparing to the native implementation. Also the author of ng2-translate is a big contributor to angular 2 i18n documentation
circy
Updated on July 28, 2022Comments
-
circy almost 2 years
I want to build a web-application with angular2 and bundle this with webpack. What is the best way for providing multiple languages:
i18n-plugin: https://github.com/webpack/i18n-webpack-plugin
or
ng2-translate: https://github.com/ocombe/ng2-translate
-
lyessmecano over 7 yearsBut this cookbook still refers to SystemJS as an integration mechanism instead of Webpack. How do we integrate the XLIFF file into compilation with Webpack?
-
circy about 7 yearsWhat is the most profitable difference to the i18n plugin from webpack?
-
Spock almost 7 years@Sebastien If you don't want to do it in a separate process, you can use the AoT Webpack plugin from npmjs.com/package/@ngtools/webpack
-
gkri almost 7 yearsand how can you change the language of the app within the app? This is my main problem and the reason why I want to do this with JIT instead of AOT, but I can find no help for this
-
lukk almost 7 yearsunfortunately, you have to make separate build for each language and provide correct routing on the server side eg. using custom url
localhost:8080/webapp/en
-
Davor almost 7 years@lukk - holy shit, that's such a bad design. Who in the world decided that, was everyone in Google high that day? I think I'll try my luck with ng2-translate first...
-
IrishDubGuy about 6 yearsFor anyone who has come from AngularJS's angular-translate, the i18n native support seems like a bizarre approach. It requires the app to be completely rebuilt and separately deployed for each language. I can't imagine what the admin overhead on this is like when you get into 4/5/6 languages which would be typical on an internal business app. At first glance it looks like ngx-translate is closer to angular-translate in that it can set up language from the server on startup, switch languages on the fly etc.