ngx-translate-messageformat-compiler

ngx-translate-messageformat-compiler

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

• Installation
• Setup
• About

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

Setup

Changed setup for v2: You no longer need to provide a MessageFormat instance. The compiler will do this. You still need to have messageformat installed, of course. See CHANGELOG for more details.

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

Please note that while you can still use nesting in your translations ({ login: { welcome: 'Welcome!' }}) with respective keys (login.welcome), you lose the ability to access object properties in your placeholders: 'Hello {name.first} {name.last}' won't work. Also note that this format uses single braces instead of double braces for placeholders.

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.

Changelog

[2.0.0] - 2017-10-22

Added

• This CHANGELOG file.

Changed

• The compiler creates its own MessageFormat instance instead of relying on the user to pass one via the constructor.
• Allow Angular up to v5 and ngx-translate up to v8 as peer dependencies. (#6)
• Use GitHub template for MIT license.

Removed

• The TranslateMessageFormatCompiler constructor no longer takes a MessageFormat instance as a parameter. This simplifies the setup. Also, messageformat unfortunately does not provide Typescript types and therefore requires a minimal type declaration. Not exposing this to cosumers of the library saves potential headaches. This is obviously a breaking change. (#2)
• TranslateMessageFormatCompiler is no longer injectable. The @Injectable annotation isn't needed when used as recommended and the class was probably never injected, but it's still technically a breaking change.