title: Getting ngx-translate-messageformat-compiler to work with ionic
body: <p>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. </p>
  
  <p>To start off I chose the template that already does "normal" translations: super.</p>
  
  <pre><code>C:\Users\N.Voigt&gt;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
  
   ️--&gt;    Install DevApp: link removed   &lt;--
  
  &gt; npm i
  √ Running command - done!
  &gt; 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
  
  -----------------------------------
  
  &gt; git add -A
  &gt; 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&gt;
  
  C:\Users\N.Voigt&gt;cd i18nTest
  </code></pre>
  
  <p>I then followed the steps <a href="https://www.npmjs.com/package/ngx-translate-messageformat-compiler" rel="nofollow noreferrer">here</a> to get ngx-translate-messageformat-compiler to work:</p>
  
  <p>Made sure that <strong>@ngx-translate/core</strong> <em>is</em> already installed:</p>
  
  <pre><code>C:\Users\N.Voigt\i18nTest&gt;npm ls @ngx-translate/core
  i18nTest@0.0.1 C:\Users\N.Voigt\i18nTest
  `-- @ngx-translate/core@8.0.0
  </code></pre>
  
  <p>Installed <strong>ngx-translate-messageformat-compiler</strong> and <strong>messageformat</strong></p>
  
  <pre><code>C:\Users\N.Voigt\i18nTest&gt;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
  </code></pre>
  
  <p>Opened this folder in my favorite editor.</p>
  
  <p>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...).</p>
  
  <p>Added the suggested testing view template to ./src/pages/welcome/welcome.html</p>
  
  <p>Starting it with <code>ionic:serve</code> 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. </p>
  
  <p><a href="https://i.stack.imgur.com/o7JXH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o7JXH.png" alt="enter image description here"></a></p>
  
  <p>Now onto adding the actual messageformat:</p>
  
  <p>In ./src/app/app.module.ts, I added the imports for <code>TranslateCompiler</code> and <code>TranslateMessageFormatCompiler</code> and added the configuration block for the compiler, so the whole configuration for the TranslateModule now reads:</p>
  
  <pre><code>TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [HttpClient]
        },
        // NEW:
        compiler: {
          provide: TranslateCompiler,
          useClass: TranslateMessageFormatCompiler
        }
      }),
  </code></pre>
  
  <p>Upon starting the app, I immediately (before even clicking "Skip" to go to the welcome page) get the following error:</p>
  
  <pre><code>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.&lt;anonymous&gt; (http://localhost:8100/build/vendor.js:65011:62)
      at Array.map (&lt;anonymous&gt;)
      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
  </code></pre>
  
  <p>I checked that <code>make-plural</code> is installed:</p>
  
  <pre><code>C:\Users\N.Voigt\i18nTest&gt;npm ls make-plural
  i18nTest@0.0.1 C:\Users\N.Voigt\i18nTest
  `-- messageformat@1.0.2
    `-- make-plural@3.0.6
  </code></pre>
  
  <p>And now I'm kinda out of my depth. I did not get any errors or warnings during the whole process. <strong>What is wrong, how can I fix it?</strong> 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 <em>and</em> messageformat. </p>
  
  <hr>
  
  <p>I removed the plural messageformat from the example texts and it works for non-plural texts:</p>
  
  <p><a href="https://i.stack.imgur.com/MeyJJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MeyJJ.png" alt="enter image description here"></a></p>
  
  <p>But I still would like to have plural support... I mean it's their own example texts, that should work, right?</p>