Как работает angular-translate-loader для webpack?

Question

Я пытаюсь интегрировать загрузчик webpack: https://github.com/Fitbit/angular-translate-loader в мой проект. В документации отсутствует полный пример, и я не могу понять, как заставить все работать вместе.

Что я хочу: иметь папку "languages" на том же уровне моего корневого компонента, которая будет содержать локали для других языков, таких как:

• локали fr.json
• локали sp.json

Что я пробовал:

Я добавил это в мой webpack.config.js (согласно документации)

module.exports = {
    module: {
           preLoaders: [{
            test: /\.json$/,
            loader: 'json'
        }],
        loaders: [{
            test: /\.json$/,
            loader: 'angular-translate?module=translations'
        }]
    },
    angularTranslate: {
        namespaces: ['app'],
        sep: '.',
        defaultLocale: 'en'
    }
};

И в корневом компоненте моего приложения я получил это:

$translateProvider.translations('en', {
  TITLE: "Translation is working",
  ANOTHER_TEXT: "But is it really working"
})
.translations('fr', localFr)
.registerAvailableLanguageKeys(['en', 'cn', 'fr', 'sp'], {
  'gb': 'en',
  'es': 'sp'
})
.preferredLanguage('en')
//See http://angular-translate.github.io/docs/#/guide/19_security for more details about Sanitize
.useSanitizeValueStrategy('escape')
//Remember the choice of Language in the local storage
.useLocalStorage();

Язык по умолчанию, очевидно, работает (en), но не другие.

Я что-то упускаю, но не могу понять почему.

Кто-нибудь знает пример проекта, использующего angular-translate-loader и webpack?

Answer 1

Я весь день застрял на одном и том же, но после долгих проб и ошибок я наконец нашел рабочее решение. У меня есть такая же настройка, как и у вас: у меня есть папка assets / languages ​​в корне моего проекта, содержащая тома в файлах JSON в формате locale-nl.json.

Для меня работало импортирование angular-translate напрямую (вместе с некоторыми дополнительными зависимостями) вместо использования angular-translate-loader:

npm install --save angular-translate angular-sanitize angular-cookies

Затем я добавил это в мой файл app.module.js (который я использую вместо index.js):

// No "real" module support yet for angular-translate, wo we have to load these manually.
// Reference: https://github.com/angular-translate/angular-translate/issues/1517
import "angular-sanitize";
import "angular-cookies";
import "angular-translate";
import "angular-translate/dist/angular-translate-loader-static-files/angular-translate-loader-static-files.js";
import "angular-translate/dist/angular-translate-storage-cookie/angular-translate-storage-cookie.js";

Затем я определяю свой модуль и настраиваю службу $translate следующим образом:

angular.module(MODULE_NAME, [ "pascalprecht.translate", "ngSanitize", "ngCookies" ])
  .config(['$translateProvider', function($translateProvider) {
    $translateProvider
    .useStaticFilesLoader({
      prefix: "../assets/languages/locale-",
      suffix: ".json"
    })
    .preferredLanguage('en')
    .useCookieStorage()
    .useSanitizeValueStrategy('sanitize');
  }])

Мои файлы переводов, например locale-nl.json, содержат один объект в этом формате:

{
  "PASSWORD": "Wachtwoord",
  "FORGOTPASSWORD": "Wachtwoord vergeten",
  "SETTINGS": "Instellingen",
  "LOGOUT": "Uitloggen",
  "LASTNAME": "Achternaam",
  "FIRSTNAME": "Voornaam",
  "BIRTHYEAR": "Geboortejaar"
}

Наконец, в моем HTML-коде я вызываю переводы через директиву $translate:

<span translate="SETTINGS">Settings</span>

Сейчас у меня нет времени, чтобы создать пример проекта, но, поскольку на ваш вопрос еще не было ответов, я хотел бы, по крайней мере, рассказать вам, что сработало для меня. Я посмотрю, есть ли у меня время, чтобы создать образец проекта в эти выходные.