angularjs - 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>

我现在没有时间创建示例项目，但由于您的问题没有得到答复，我想至少让您知道对我有用的内容。我会看看这个周末是否有时间创建一个示例项目。