paramètres régionaux AngularJS avec ES6 et Webpack

Question

J'ai un problème, je travaille sur un projet avec intertionalization. J'utilise AngularJS 1.5, ES6 et Webpack, j'utilise aussi ng-translate pour le texte différent.

J'ai installé AngularJS-i18n pour manipuler les nombres et la date et AngularJS-dynamic-locale pour définir la langue $ locale lorsque je change la langue du site avec npm.

Le problème, je ne sais pas comment charger les paramètres régionaux AngularJS à partir de node_modules dans mon config.js. Je l'ai fait:

export default function configApp(thmDynamicLocaleProvider) { 
    tmhDynamicLocaleProvider.localeLocationPattern('../../../node_modules/angular-i18n/angular-locale_{{locale}}.js'); 
} 
configApp.$inject = ['thmDynamicLocaleProvider']; 

Je définis la bonne URL, mais je ne sais pas pourquoi, l'application renvoie une erreur 404. Et je ne sais pas comment puis-je charger ceci dans webpack ou d'autres ...

Answer 1

Si vous utilisez webpack je vous suggère d'utiliser la fonction import(). Il va diviser les locales en morceaux qui seront appelés dans l'exécution par requête. Mais cette méthode a une restriction. Vous ne pouvez pas implémenter de façon dynamique les blocs nécessaires. Ainsi, lorsque vous obtiendrez des informations de quelque part du côté des clients concernant les paramètres régionaux actuels, vous pourrez, grâce à l'opérateur switch, choisir les éléments à importer.

Par exemple,

function GetLocaleInfo(locale) { 
    switch(locale) { 
     case 'en': 
      import('angular-i18n/angular-locale_en.js').then((en) => { 
       setLocale(en); 
      }); 
     case 'ru': 
      import('angular-i18n/angular-locale_ru.js').then((ru) => { 
       setLocale(ru); 
      }); 
     } 
} 

Je paierai un peu plus d'attention que la fonction import à utiliser sur le chemin async doit avoir uniquement le contenu de la chaîne. Il ne prend pas en charge la cause de la valeur dynamique lors de l'étape de génération webpack, vérifiez ces méthodes pour créer des blocs de code appropriés dans le répertoire de construction.

est ici vous trouverez plus d'informations sur code splitting on the webpack