Sync loading with Webpack

I was looking into preloading a few locales so that async loading wouldn’t be required (I’m using this in cordova so it wouldn’t make much sense) and I came up with this:

  function getInjectedLocale() {
    var localInjector = angular.injector(['ngLocale']);
    return localInjector.get('$locale');
  }

  // put de-de language into cache
  require('angular-i18n/de-de');
  tmhDynamicLocaleCache.put('de-de', getInjectedLocale());

  // put en-gb language into cache
  require('angular-i18n/en-gb');
  tmhDynamicLocaleCache.put('en-gb', getInjectedLocale());

  // later on:
  tmhDynamicLocale.set('en-gb'); // or de-de

Seems to work very well, I’m leaving this here as a possible addition to the readme. A possible improvement might be to create a method in tmhDynamicLocale, like tmhDynamicLocale.cacheLastLoadedLocale('de-de') for instance, which can be called right after the require.

[andreialecu]

@ChristianUlbrich The above code assumes you’re using webpack.

You can just put it inside a .run call like this:

app.run(function(tmhDynamicLocale, tmhDynamicLocaleCache) {
  ...
});

If you’re not using webpack, then I’m not sure how this helps you or why you would need it. Care to elaborate?

[mehl321]

This chunk of code was helpful to get started but I took another path with webpack to tackle async issues. It’s using ui-router.

In webpack make a bare copy of the locals so they are packaged but not (yet) imported.

var copyStatic = new CopyWebpackPlugin([
  {from: './node_modules/angular-i18n/angular-locale_de-de.js', to: path.resolve(APP_ROOT, appConfig.buildDir + '/i18n')},
  {from: './node_modules/angular-i18n/angular-locale_en-gb.js', to: path.resolve(APP_ROOT, appConfig.buildDir + '/i18n')},
]);

Set the path to the locales in the angular config.

tmhDynamicLocaleProvider.localeLocationPattern('i18n/angular-locale_{{locale}}.js');

Finally created a ui-router hook to make sure that the locale is always set before your logic starts executing.

$transitionsProvider.onBefore({}, setLocale, { priority: 20 });

function setLocale(transition) {
  const tmhDynamicLocale = transition.injector().get('tmhDynamicLocale');
  return tmhDynamicLocale.set('fr')
    .catch((err) => {
      console.warn('Error setting locale. Using default locale.', err);
    });
}