Как работает угловой-транслятор-загрузчик для webpack?

Question

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

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

• локали 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) но не другие.

Мне что-то не хватает, но я не могу понять, почему.

Кто-нибудь знает пример проекта с использованием угловозагрузочного погрузчика и webpack?

Answer 1

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

То, что сработало для меня было импортировать угловой перевод непосредственно (вместе с некоторыми дополнительными зависимостями), вместо того, чтобы использовать угловую-перевод-погрузчик:

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"; 

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

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

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

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

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

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

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