我试图让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。
现在添加实际的messageformat:
在./src/app/app.module.ts中,我添加了TranslateCompiler
和TranslateMessageFormatCompiler
的导入并添加了编译器的配置块,因此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,它适用于非复数文本:
但我仍然希望获得多元支持......我的意思是它们自己的示例文本,这应该有效,对吗?
答案 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}}",
修好之后就像魅力一样。
修正了它并发送了pull request所以希望我是最后一个绊倒的人。