Error When Using TranslateMessageFormatCompiler and {{ }} in Language File

[vdiaz1130]

Current behavior

When specifying dynamic text in language file and combining it with TranslateMessageFormatCompiler, the application throws an exception.

// Module configuration
TranslateModule.forRoot({
  compiler: {
    provide: TranslateCompiler,
    useClass: TranslateMessageFormatCompiler
  }
})

// Language File
export const messages = {
  "en-US-DEMO": {
    "title": "Boss name: {{clientName}}",
    "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}}.",
    "people": "{gender, select, male{He is} female{She is} other{They are}} influential.",
    "completeObligation": "{count, plural, =0{There are no obligations} one{Complete Obligation} other{Complete Obligations}}",
  },
}

// Template File
<span>{{'things' | translate:"{ count: 0 }"}}</span><br>
<span>{{'title' | translate:"{ clientName: 'The Boss' }"}}</span>

Expected behavior

Output should be:

There is nothing. 
Boss name: The Boss

Observed behavior:
Exception is thrown.

Removing the brackets from "title": "Boss name: {{clientName}}" prevents exception but clientName is obviously not parsed as expected.

I noticed that replacing the double brackets with single one gets the application working again but in the app we have almost 4,000 references to {{ }} in the language files.

How do you think that we should fix this?

I'd like to continue to use double braces in my language files if possible. There are many refs.

Minimal reproduction of the problem with instructions

• In this StackBlitz project: https://bit.ly/3KEgXeF change single brace to double brace "boss": "The boss is {bossName}"

• Observe app crashes

• Create a project that uses the ngx-translate-messageformat-compiler

• Add a parameter to one of the entries in the language object - use double brace

• Run the project

• Observe error in console

• Change double brace to single brace

• Observe error is gone

Environment

OsX 10.15.7

"@angular/animations": "^13.3.2",
"@angular/common": "^13.3.2",
"@angular/compiler": "^13.3.2",
"@angular/core": "^13.3.2",
"@angular/platform-browser": "^13.3.2",
"@angular/platform-browser-dynamic": "^13.3.2",
"@angular/router": "^13.3.2",
"@ngx-translate/core": "^14.0.0", // Also tried with version ^13.0.0
"messageformat": "^2.3.0",
"ngx-translate-messageformat-compiler": "^5.0.1",
"ngx-webstorage-service": "^5.0.0",
"ramda": "^0.28.0",
"rxjs": "^7.5.5",
"sanitize.css": "^13.0.0",
"tslib": "^2.3.1",
"zone.js": "^0.11.5"


Browser:
- [ x] Chrome (desktop) version 100.0.4896.75 (Official Build) (x86_64)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- node -v: 14.15.1
- npm -v: 6.14.8
- Platform:  Mac 10.15.7

Others: