EzDevInfo.com

Combine multiple messageformat.js projects

I have multiple JavaScript projects that use messageformat.js for i18n, each provides a file with compiled messages, using i18n as the message namespace.

Now I would like to reuse the messages of multiple projects in another project, so I thought I could just include them one after another. Unfortunately, this doesn't work since each file redefines the i18n namespace.

Is there any way to combine compiled messageformat.js files that use the same message namespace, without having to recompile them together? Maybe there is an undocumented feature in the compiler that let's it reuse an existing namespace? Or to put it another way: What is the common pattern to combine messages from multiple projects with messageformat.js?

Changing language with angular-translate causes error with messageformat and binding

I am trying to learn angular-translate using messageformat. When I click my button to change language, i get an error 'undefined is not a function' - but it's not 100% reliable. It happens very easily, but I am not sure which change triggers the error.

Reproduced by: Tested in Chrome 41 Firefox developer edition 39 and IE11 also. Does not work.

Here is how I reproduced it in detail: On fresh load: Set variable to another number (eg. 3) while still English. Change to Norwegian. Change number to something else. Change back to English. When I try to change the number now, it doesn't work anymore I have recreated my code in a plunker: http://plnkr.co/edit/K4xHNf93Vhkrfc5LmliV?p=preview

The code is the following:

HTML:

<div ng-controller="Controller as Ctrl">
    <h1>{{ 'TITLE' | translate }}</h1>
    <p>{{ 'FOO' | translate }}</p>
    <input type="number" ng-model="translationData.NUM">
    <p>{{ 'PLURAL' | translate:translationData}}</p>
    <button ng-click="changeLanguage('en')">{{ 'BUTTON_LANG_EN' | translate}}</button>
    <button ng-click="changeLanguage('de')">{{ 'BUTTON_LANG_DE' | translate}}</button>
    <button ng-click="changeLanguage('no')">{{ 'BUTTON_LANG_NO' | translate}}</button>
</div>

Javascript:

angular.module('app', ['pascalprecht.translate'])
.config(function ($translateProvider) {
    $translateProvider.translations('en', {
        TITLE: 'Hello',
        FOO: 'This is a paragraph.',
        BUTTON_LANG_EN: 'English',
        BUTTON_LANG_DE: 'German',
        BUTTON_LANG_NO: 'Norwegian',
        PLURAL: "You have {NUM, plural, =0{no messages} one{1 message} other{# messages}}."
    });
    $translateProvider.translations('de', {
        TITLE: 'Hallo',
        FOO: 'Dies ist ein Paragraph.',
        BUTTON_LANG_EN: 'Englisch',
        BUTTON_LANG_DE: 'Deutsch',
        BUTTON_LANG_NO: 'Norwegisch',
        PLURAL: "Sie haben {NUM, plural, =0{keine Nachrichten haben} one{1 Nachricht} other{# Nachrichten}}."
    });
    $translateProvider.translations('no', {
        TITLE: 'Hei',
        FOO: 'Dette er en paragraf',
        BUTTON_LANG_EN: 'Engelsk',
        BUTTON_LANG_DE: 'Tysk',
        BUTTON_LANG_NO: 'Norsk',
        PLURAL: "Du har {NUM, plural, =0{ingen meldinger} one{1 melding} other{# meldinger}}."
    });
    $translateProvider.useMessageFormatInterpolation();
    $translateProvider.preferredLanguage('en');
    $translateProvider.fallbackLanguage('en');

})
.controller('Controller', function ($scope, $translate) {
    $scope.translationData = {
        NUM: 0
    };
    $scope.changeLanguage = function (key) {
        $translate.use(key);
    };
});