让 ngx-translate-messageformat-compiler 与 ionic 一起工作

Question

我正在尝试让 Ionic 应用程序使用 ICU 消息格式翻译。我实际上不是 "web" 人，我只是想让一个测试前端作为我的 C# 后端的概念验证，它提供那些 ICU 字符串，所以如果我错过了一些明显的东西，请耐心等待.

首先，我选择了已经完成 "normal" 翻译的模板：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 启动它就像人们想象的那样：应用程序启动，我单击 "Skip" 转到欢迎页面，我的文本出现...已翻译，但尚未 "messageformat"编辑。

现在开始添加实际的消息格式：

在 ./src/app/app.module.ts 中，我添加了 TranslateCompiler 和 TranslateMessageFormatCompiler 的导入，并添加了编译器的配置块，所以整个配置TranslateModule 现在读取：

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

启动应用程序后，我立即（甚至在单击 "Skip" 进入欢迎页面之前）收到以下错误：

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

现在我有点不知所措了。在整个过程中我没有收到任何错误或警告。 出了什么问题，我该如何解决？ 我不反对别人告诉我我做错了，我必须使用不同的包。我只需要一种翻译和消息格式的方法。

我从示例文本中删除了复数消息格式，它适用于非复数文本：

但我仍然希望得到复数支持...我的意思是这是他们自己的示例文本，应该可以，对吗？

Answer 1

神圣的语法错误蝙蝠侠！

想通了。他们的榜样是错误的。它有一个语法错误。

"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}}",

修复后效果很好。

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

让 ngx-translate-messageformat-compiler 与 ionic 一起工作

Getting ngx-translate-messageformat-compiler to work with ionic

internationalization

ionic-framework

messageformat.js