I'm trying to get an Ionic app to work with ICU messageformat translations. I'm not actually a "web" guy, I'm just trying to get a test frontend working as a proof-of-concept for my C# backend that delivers those ICU strings, so bear with me if I missed something obvious.
To start off I chose the template that already does "normal" translations: 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
I then followed the steps here to get ngx-translate-messageformat-compiler to work:
Made sure that @ngx-translate/core is already installed:
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
Installed ngx-translate-messageformat-compiler and 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
Opened this folder in my favorite editor.
Added the example to the json files ./src/assets/i18n/de.json (this is my local language used). Added the example to the json files ./src/assets/i18n/en.json (this is the fallback language... just in case...).
Added the suggested testing view template to ./src/pages/welcome/welcome.html
Starting it with ionic:serve works as one would imagine: the app starts, I click "Skip" to go to the welcome page and my text appears... translated, but not yet "messageformat"ed.
Now onto adding the actual messageformat:
In ./src/app/app.module.ts, I added the imports for TranslateCompiler and TranslateMessageFormatCompiler and added the configuration block for the compiler, so the whole configuration for the TranslateModule now reads:
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
},
// NEW:
compiler: {
provide: TranslateCompiler,
useClass: TranslateMessageFormatCompiler
}
}),
Upon starting the app, I immediately (before even clicking "Skip" to go to the welcome page) get the following error:
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
I checked that make-plural is installed:
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
And now I'm kinda out of my depth. I did not get any errors or warnings during the whole process. What is wrong, how can I fix it? I'm not opposed to people telling me I do it wrong and I have to use a different package. I just need a way to translate and messageformat.
I removed the plural messageformat from the example texts and it works for non-plural texts:
But I still would like to have plural support... I mean it's their own example texts, that should work, right?
