让ngx-translate-messageformat-compiler与离子

时间:2017-11-17 10:30:50

标签: ionic-framework internationalization messageformat.js

我试图让Ionic应用程序使用ICU messageformat翻译。我实际上并不是一个" web"伙计,我只是试图让测试前端作为我的C#后端的概念验证,提供那些ICU字符串,所以如果我错过了一些明显的东西,请耐心等待。

首先,我选择了已经做过的模板"正常"翻译:super。

C:\Users\N.Voigt>ionic start i18nTest

? What starter would you like to use: super
√ Creating directory .\i18nTest - done!
√ Downloading and extracting super starter - done!
√ Personalizing ionic.config.json and package.json - done!

Installing dependencies may take several minutes.

  *   IONIC  DEVAPP  *

 Speed up development with the Ionic DevApp, our fast, on-device testing mobile app

  -     Test on iOS and Android without Native SDKs
  -     LiveReload for instant style and JS updates

 ️-->    Install DevApp: link removed   <--

> npm i
√ Running command - done!
> git init

  *   IONIC  PRO  *

 Supercharge your Ionic development with the Ionic Pro SDK

  -     Track runtime errors in real-time, back to your original TypeScript
  -     Push remote updates and skip the app store queue

Learn more about Ionic Pro: https://ionicframework.com/products

? Install the free Ionic Pro SDK and connect your app? No

-----------------------------------

> git add -A
> git commit -m "Initial commit" --no-gpg-sign

Starter Welcome:
Welcome to the IONIC SUPER STARTER!

The Super Starter comes packed with ready-to-use page designs for common mobile designs like master detail,
login/signup, settings, tutorials, and more. Pick and choose which page types you want to use and remove the ones you
don't!

For more details, please see the project README:
https://github.com/ionic-team/starters/blob/master/ionic-angular/official/super/README.md


Next Steps:
* Go to your newly created project: cd .\i18nTest
* Get Ionic DevApp for easy device testing: link removed

C:\Users\N.Voigt>

C:\Users\N.Voigt>cd i18nTest

然后我按照here步骤使ngx-translate-messageformat-compiler工作:

确保已安装 @ ngx-translate / core

C:\Users\N.Voigt\i18nTest>npm ls @ngx-translate/core
i18nTest@0.0.1 C:\Users\N.Voigt\i18nTest
`-- @ngx-translate/core@8.0.0

已安装 ngx-translate-messageformat-compiler messageformat

C:\Users\N.Voigt\i18nTest>npm install ngx-translate-messageformat-compiler messageformat --save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ messageformat@1.0.2
+ ngx-translate-messageformat-compiler@2.0.1
added 121 packages in 27.242s

在我最喜欢的编辑器中打开此文件夹。

将示例添加到json文件./src/assets/i18n/de.json(这是我使用的本地语言)。 将示例添加到json文件./src/assets/i18n/en.json(这是后备语言......以防万一......)。

将建议的测试视图模板添加到./src/pages/welcome/welcome.html

使用ionic:serve启动它可以实现:应用程序启动,我点击&#34;跳过&#34;转到欢迎页面,我的文字显示...已翻译,但还没有#34; messageformat&#34; ed。

enter image description here

现在添加实际的messageformat:

在./src/app/app.module.ts中,我添加了TranslateCompilerTranslateMessageFormatCompiler的导入并添加了编译器的配置块,因此TranslateModule的整个配置现在读取:

TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      },
      // NEW:
      compiler: {
        provide: TranslateCompiler,
        useClass: TranslateMessageFormatCompiler
      }
    }),

启动应用程序后,我立即(甚至在点击&#34;跳过&#34;转到欢迎页面之前)得到以下错误:

Runtime Error
Formatting function "plural" not found!
Stack
Error: Formatting function "plural" not found!
    at Compiler.token (http://localhost:8100/build/vendor.js:64971:42)
    at Compiler.<anonymous> (http://localhost:8100/build/vendor.js:65011:62)
    at Array.map (<anonymous>)
    at Compiler.compile (http://localhost:8100/build/vendor.js:65011:28)
    at Compiler.compile (http://localhost:8100/build/vendor.js:65017:26)
    at MessageFormat.compile (http://localhost:8100/build/vendor.js:120919:22)
    at TranslateMessageFormatCompiler.compileTranslations (http://localhost:8100/build/vendor.js:120440:35)
    at SafeSubscriber.loadingTranslations.take.subscribe._this.pending [as _next] (http://localhost:8100/build/vendor.js:39213:55)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/vendor.js:21710:16)
    at SafeSubscriber.next (http://localhost:8100/build/vendor.js:21657:22)
Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.2
Angular Core: 5.0.1
Angular Compiler CLI: 5.0.1
Node: 9.2.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

我检查了make-plural已安装:

C:\Users\N.Voigt\i18nTest>npm ls make-plural
i18nTest@0.0.1 C:\Users\N.Voigt\i18nTest
`-- messageformat@1.0.2
  `-- make-plural@3.0.6

现在我有点超出我的深度。在整个过程中我没有收到任何错误或警告。 有什么问题,我该如何解决?我并不反对人们告诉我我做错了,我必须使用不同的套餐。我只需要一种翻译 messageformat的方法。

我从示例文本中删除了复数messageformat,它适用于非复数文本:

enter image description here

但我仍然希望获得多元支持......我的意思是它们自己的示例文本,这应该有效,对吗?

1 个答案:

答案 0 :(得分:2)

神圣的语法错误蝙蝠侠!

想出来。他们的例子是错的。它有语法错误。

"things": "There {count, plural, =0{is} one{is} other{are}} {count, plural, =0{} one{a} other{several}} {count, plural, =0{nothing} one{thing} other{things}",

只是缺少一个右大括号。它应该是(见最后一个字符):

"things": "There {count, plural, =0{is} one{is} other{are}} {count, plural, =0{} one{a} other{several}} {count, plural, =0{nothing} one{thing} other{things}}",

修好之后就像魅力一样。

enter image description here

修正了它并发送了pull request所以希望我是最后一个绊倒的人。