AngularJS translateProvider ReferenceError when setting preferredLanguage

Question

I'm trying to make translations with AngularJS. Translations works fine while preferredLanguage is set to en. But if I change to any other for example lt I get error

ReferenceError: require is not defined

on line:

var lcFile = require('path').join(__dirname, 'locale', lc + '.js'),

My app's config looks like that:

myApp.config(['$translateProvider', function ($translateProvider) {

    $translateProvider.translations('lt', {
        "OTHER_LIKES" : "{peopleCount, plural, one {# žmogus tai mėgsta} few {# žmonės tai mėgsta} other {# žmonių tai mėgsta}}",
        "YOU_AND_OTHERS_LIKES" : "{peopleCount, plural, one {tu ir # žmogus tai mėgsta} few {tu ir # žmonės tai mėgsta} other {tu ir # žmonių tai mėgsta}}",
        "YOU_LIKE" : "Tu mėgsti tai"
    });

    $translateProvider.translations('en', {
        "OTHER_LIKES" : "{peopleCount, plural, one {# person likes this} few {# people likes this} other {# people likes this}}",
        "YOU_AND_OTHERS_LIKES" : "{peopleCount, plural, one {You and # other likes this} few {You and # other likes this} other {You and # other likes this}}",
        "YOU_LIKE" : "You like this"
    });

    $translateProvider.preferredLanguage('lt');

    $translateProvider.fallbackLanguage('en');

    $translateProvider.addInterpolation('$translateMessageFormatInterpolation');
}]);

Answer 1

I also experienced this error in combination with messageformat.js version 0.2.2. When setting a locale, the MessageFormat translation provider is notified. If it has not been configured with the necessary locales, it will try to require() the file. Since require is a node.js keyword, not supported by browsers, it fails.

To avoid this, you can e.g. concatenate the required locales from the messageformat.js distribution with the vendor scripts in your build process.

Example locale definition:

MessageFormat.locale.en=function(n){return n===1?"one":"other"}