Язык AngularJS с ES6 и Webpack

Question

У меня проблема, я работаю над проектом с интернационализацией. Я использую AngularJS 1.5, ES6 и Webpack, я также использую ng-translate для другого текста.

Я установил AngularJS-i18n для манипулирования числами и датой и AngularJS-dynamic-locale для установки языка $locale, когда я меняю язык сайта с помощью npm.

Проблема, я не знаю, как загрузить языковой стандарт AngularJS из node_modules в моем config.js. Я сделал это:

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

Я установил хороший URL, но не знаю почему, приложение возвращает ошибку 404. И я не знаю, как я могу загрузить это в веб-пакет от других...

Answer 1

Если вы используете веб-пакет, я предлагаю вам использовать import() функция. Это разделит локали на части, которые будут вызваны во время выполнения по запросу. Но у этого метода есть одно ограничение. Вы не можете реализовать динамический путь к необходимым фрагментам. Таким образом, когда вы получите информацию о текущей локали где-то на стороне клиента, вы сможете switch Оператор выбирает, что импортировать.

Например,

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);
            });  
       }
}

Я уделю немного больше внимания, что import Функция при использовании по асинхронному пути должна иметь только строковое содержимое. Он не поддерживает динамическое значение, потому что на шаге сборки веб-пакет проверяет эти способы создания правильных фрагментов кода в каталоге сборки.

Здесь вы найдете больше информации о разделении кода в веб-пакете.