peg$SyntaxError

[tomoakley]

Hi, I've put the custom compiler into my app.module.ts file, so it looks like this:

function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,
  ],
  imports: [
    ...,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: TranslateMessageFormatCompiler
      }
    })
  ],
  providers: [...]
})
export class AppModule {
}

I am using the module like this:

<div>
  {{ "LIST_VIEW.FOOTER" | translate: { count: maxCount, type: footerType } }}
</div>

maxCount is a variable of type number and footerType is a string.

In my translations file I have this:

"LIST_VIEW": {
  "FOOTER": "{{count}} {{type}} {count, plural, =0{s} one{} other{s}}"
}

The text is supposed to read '0 locations', (if nothing was loaded) '1 location' or '10 locations'.

However when reloading my app, I get this error in the console:

peg$SyntaxError
expected: [Object, Object, Object, Object, Object, Object, Object, Object] (8)
found: "{"
location: {start: {offset: 1, line: 1, column: 2}, end: {offset: 2, line: 1, column: 3}}
longStack: "↵____________________Elapsed_65_ms__At__Thu_Nov_16_2017_10_36_09_GMT_0000__GMT_@[native…"
message: "Expected [ \\t\\n\\r] or [0-9a-zA-Z$_] but \"{\" found."
name: "SyntaxError"
stack: "↵____________________Elapsed_65_ms__At__Thu_Nov_16_2017_10_36_09_GMT_0000__GMT_@[native…"

Thanks for any help.

[lephyrus]

Hi @tomoakley. Please learn about the messageformat syntax here: https://messageformat.github.io/guide/ (Hint: it uses single curly braces.)

Unless this is more than a support request, feel free to close this issue, thanks.

[tomoakley]

@lephyrus thanks for replying. I'm trying to pass variables of count and type into the translation string, which I assumed worked the same way as the standard ngx-translate library, using {{ }} to enclose a variable. Am I wrong? Do I have to define the whole string each time for =0, one and other? The two variables are not affected by the pluralisation, I just need to add an 's' on the end if it's 0 or multiple, but leave the 's' off it's single.

[lephyrus]

@tomoakley All I can tell you is that the whole string is "interpreted" by messageformat, so you have to use its syntax. Please look at the example in the README of this library, or read the guide I've linked above, or just follow my hint and use single braces around your placeholders.

Closing, because there is no technical issue and the README already provides the necessary guidance.

[dabbid]

I'm currently working on a benchmark between ngx-translate and transloco to handle i18n on our libs, I don't say that one lib is better than the other, it's not the topic (and not so simple). Just saying that I didn't have to convert my {{ to { to get it working with transloco and their message format plugin, I didn't check source code to see how it's achieved though