webpack 的 angular-translate-loader 是如何工作的？

Question

我正在尝试将 webpack 加载器：angular-translate-loader 集成到我的项目中。 该文档缺少完整的示例，我无法弄清楚如何使所有内容协同工作。

我想要什么： 在我的根组件的同一级别有一个“语言”文件夹，其中将包含其他语言的语言环境，例如：

• locale-fr.json
• locale-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，其中包含格式为 locale-nl.json 的 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>

我现在没有时间创建示例项目，但是由于没有对您的问题作出回应，但我想至少让您知道什么对我有用。我会看看这个周末我是否有时间创建一个示例项目。