ngx-translate-messageformat-compiler
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.1 • Public • Published

    ngx-translate-messageformat-compiler

    Compiler for ngx-translate that uses messageformat.js to compile translations using ICU syntax for handling pluralization and gender

    npm version build code style: prettier

    Example App (StackBlitz)

    Table of Contents

    Installation

    This assumes that you've already installed ngx-translate.

    Using npm:

    npm install ngx-translate-messageformat-compiler messageformat --save

    ... or if you use yarn:

    yarn add ngx-translate-messageformat-compiler messageformat

    Something to be aware of if you deploy to strict production environments: Fundamentally, messageformat is a compiler that turns ICU MessageFormat input into JavaScript. This means it uses new Function under the hood which necessicates allowing unsafe-eval for the script-src Content Security Policy (CSP).

    Setup

    This library currently supports Angular versions 13+ and ngx-translate versions 14+. (You can still use version 4.x, which supports Angular 6-13 and ngx-translate 10-13.) Check the documentation of @ngx-translate/core to know which of its versions to use, depending on your Angular version.

    Integration with ngx-translate

    You need to configure TranslateModule so it uses TranslateMessageFormatCompiler as the compiler:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { TranslateCompiler, TranslateModule } from '@ngx-translate/core';
    import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
    
    import { AppComponent } from "./app";
    
    @NgModule({
      imports: [
        BrowserModule,
        TranslateModule.forRoot({
          compiler: {
            provide: TranslateCompiler,
            useClass: TranslateMessageFormatCompiler
          }
        })
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

    You can override the values used when configuring MessageFormat by providing a configuration object for the MESSAGE_FORMAT_CONFIG injection token. Here's the default:

    {
      biDiSupport: false,
      disablePluralKeyChecks: false,
      formatters: undefined,
      locales: undefined,
      strictNumberSign: false
    }

    Locale initialization

    By default, messageformat initializes all locales. It is recommended that you indicate which locales you will need, like this:

    import { MESSAGE_FORMAT_CONFIG } from 'ngx-translate-messageformat-compiler';
    
    @NgModule({
      // ...
      providers: [
        { provide: MESSAGE_FORMAT_CONFIG, useValue: { locales: ['ar', 'fr'] }}
      ]
    
    })

    The value for locales is either a string or an array of strings. The first locale is used as the default locale by messageformat. More info here: https://messageformat.github.io/messageformat/MessageFormat

    Advanced configuration

    MessageFormat instances provide some methods to influence its behaviour, among them addFormatters, setBiDiSupport, setStrictNumberSign and disablePluralKeyChecks. Learn about their meaning here: https://messageformat.github.io/messageformat/MessageFormat

    This is how you would enable bi-directional support and add a custom formatter, for example:

    import { MESSAGE_FORMAT_CONFIG } from 'ngx-translate-messageformat-compiler';
    
    @NgModule({
      // ...
      providers: [{
        provide: MESSAGE_FORMAT_CONFIG,
        useValue: {
          biDiSupport: true,
          formatters: { upcase: v => v.toUpperCase() }
        }
      }]

    Usage

    This library implements neither the syntax used for pluralization (et al) nor the "mechanics" for making translations work in your Angular app. The former is MessageFormat, the latter ngx-translate. Before you assume your problem is with ngx-translate-messageformat-compiler, please consult these ressources:

    Here's two important differences to ngx-translate's default syntax when using MessageFormat:

    • You lose the ability to access object properties in your placeholders: 'Hello {name.first} {name.last}' won't work.
    • Simple placeholders are enclosed in single curly braces instead of double curly braces: Hello {name}

    This library also exports TranslateMessageFormatDebugCompiler, which you can use as a drop-in replacement for the regular TranslateMessageFormatCompiler. The debug compiler will log to the console whenever a translation string is compiled to an interpolation function, and whenever such a function is called (with interpolation parameters) to compute the final translated string. The logs may help you figuring out which translation produces an error and the timing of when the individual steps happen.

    Here's an example to get you started:

    Example

    Translation strings:

    {
      "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}} {how}"
    }

    View template:

    <ul>
      <li translate [translateParams]="{ count: 0 }">things</li>
      <li translate [translateParams]="{ count: 1 }">things</li>
      <li>{{'things' | translate:"{ count: 2 }"}}</li>
    </ul>
    <ul>
      <li translate [translateParams]="{ gender: 'female', how: 'influential' }">people</li>
      <li translate [translateParams]="{ gender: 'male', how: 'funny' }">people</li>
      <li>{{'people' | translate:"{ how: 'affectionate' }"}}</li>
    </ul>

    Note that this illustrates using both the directives and the pipe provided by ngx-translate. You don't have to mix them, obviously.

    Output:

    - There is nothing
    - There is a thing
    - There are several things
    
    - She is influential
    - He is funny
    - They are affectionate
    

    About

    If you're here, you probably know what you're looking for. If you do wonder what this is, here's a brief explanation.

    ICU Message Format is a standardized syntax for dealing with the translation of user-visible strings into various languages that may have different requirements for the correct declension of words (e.g. according to number, gender, case) - or to simplify: pluralization.

    Messageformat.js is a compliant implementation for Javascript.

    Back in AngularJS, angular-translate, formerly by @PascalPrecht, provided support for ICU syntax using messageformat.js. This compiler "plugin" adds the same rich pluralization support to the excellent ngx-translate for Angular (2+). Thanks to @ocombe for his work and his supporting pluggable compilers in the core. Thanks also to @PascalPrecht for suggesting a contribution when I talked to him about this at Jazoon.

    Install

    npm i ngx-translate-messageformat-compiler

    DownloadsWeekly Downloads

    17,814

    Version

    5.0.1

    License

    MIT

    Unpacked Size

    50.7 kB

    Total Files

    17

    Last publish

    Collaborators

    • lephyrus