When adding ngx-translate-messageformat-compiler, {{}} interpolations break all translations.

[mcpierce]

I followed the instructions for adding the dependency and updating my translates, but the entire translation system stopped working once those steps were followed; i.e., now NO translations work. Only the untranslated keys are displayed across the entire application.

The changes to my application to use ngx-translate-messageformat-compiler are as follows:

Environment:

package.json

    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "ngx-translate-messageformat-compiler": "^4.4.0",

app.module.ts

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

en.json

"call-interval-schedule-page": {
  "table": {
    "row:" {
      "contact-action-label": "{position, selectordinal, one{#st} two{#nd} few{#rd} other{#th}} Contact"
    }
  }
}

page.html

<tr *ngFor='let action of contact_actions; let i = index'>
        <td>{{'call-interval-schedule-page.table.row.contact-action-label'|translate:{position:i} }}</td>
</tr>

The Generated Output

call-interval-schedule-page.table.row.contact-action-label

[lemoinem]

Your json clearly has header between table and contact-action-label. Whereas your template uses row.

[mcpierce]

Sorry, that was an error in copying over the text from my translation file (didn't want to bring the full 288 lines). The key in the HTML and what's in the translation file do in fact match; i.e., both are using row.

The problem still remains.

[lephyrus]

Hi @mcpierce! This is not a support forum, I'm afraid. It's unlikely that the library is fundamentally broken for everyone, so your issue does not qualify as a bug report.

I generally like to help, as do others. But you need to do your part. Make it as easy as possible for us. Find the source of the error. Look at the logs. Do some debugging. Try ngx-translate without this plugin. Make a minimal reproduction on StackBlitz.

Good luck!

[mcpierce]

I think I'll instead find another project and work with them rather than use one from someone so dismissive. I looked across the issues here and see that's the standard response, close issues without resolving or investigating.

[lephyrus]

I guess I was more dismissive than necessary, sorry. But my point stands. At the very least, put your example on StackBlitz. You can even fork my example (top of README).

[mcpierce]

Thank you for realizing that.

I've forked the example app to create a minimal example that demonstrates the issue I'm experiencing.

In doing so, I believe I've nailed down the problem. I had already been using ngx-translate and had values being interpolated with {{value}}, for example. When I added ngx-translate-messageformat-compiler to the mix, these entries caused all of the translations to stop working. Changing them to {value} fixed the issue.

Perhaps adding a note in the README file to let someone migrating over to use this project that they need to fix any such translation entries would be in order?

[lephyrus]

It's there actually, under "Usage" (search for "single curly braces"), but clearly not visible enough - not the first time that's been the problem. The README has grown over time (bigger than the actual runtime code for sure!). I guess it need an overhaul...

Glad it's working for you now.

[jonjaques]

@lephyrus I experienced this behavior recently where one bad value (incorrect syntax) for one key breaks all translated values.

Test Case: https://codesandbox.io/embed/angular-08vun

Expected Behavior The translated value should either be displayed w/ the bad syntax in place, or simply pass through the key.

Also a warning or exception w/ the broken key should be thrown

Actual Behavior App doesn't render. In my actual project, the page at least renders, but all translates values simply pass through their keys

[vdiaz1130]

It's there actually, under "Usage" (search for "single curly braces"), but clearly not visible enough - not the first time that's been the problem. The README has grown over time (bigger than the actual runtime code for sure!). I guess it need an overhaul...

Glad it's working for you now.

Is there a solution other than converting double brace to single? We started using MessageFormat after the implementation of ngx-translate. We have almost 4,000 references of the double brace {{}}.