ngx-translate-messageformat-compiler

7.2.0 verified Fri May 01 auth: no javascript

Compiler for ngx-translate that uses messageformat.js to compile translations using ICU syntax for handling pluralization and gender. Current stable version is 7.2.0, released under an MIT license with monthly releases. Key differentiators: supports Angular 13+, ngx-translate 14-17, and messageformat 3; provides MESSAGE_FORMAT_CONFIG token for custom formatters and options; enables ICU pluralization and gender selection in ngx-translate projects. Requires unsafe-eval CSP for runtime compilation.

Common errors

error ERROR Error: Uncaught (in promise): TypeError: messageformat_compiler_1.TranslateMessageFormatCompiler is not a constructor ↓

cause Node require() used with ESM-only package

fix

Switch to ESM import syntax: import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'

error NullInjectorError: No provider for MESSAGE_FORMAT_CONFIG ↓

cause Missing provider for MESSAGE_FORMAT_CONFIG injection token

fix

Add { provide: MESSAGE_FORMAT_CONFIG, useValue: {...} } to providers array

Warnings

gotcha ICU runtime compilation requires unsafe-eval CSP directive ↓

fix Add 'unsafe-eval' to script-src Content-Security-Policy header

breaking Version 7 requires @ngx-translate/core ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 and @messageformat/core ^3.2.0 ↓

fix Update peer dependencies to match required versions

deprecated Older versions (pre-7) used different config object structure ↓

fix Upgrade to v7 and use MESSAGE_FORMAT_CONFIG token

gotcha MESSAGE_FORMAT_CONFIG keys differ from MessageFormat options (e.g., biDiSupport not biDiSupport) ↓

fix Use MESSAGE_FORMAT_CONFIG keys as documented, not raw MessageFormat option names

gotcha Placeholder syntax differs from ngx-translate default (ICU vs {{ }}); ngx-translate translate pipe/directive works but requires ICU syntax in translation values ↓

fix Use ICU syntax like {{ count, plural, =1 {one} other {# other} }} instead of ngx-translate native interpolation

Install

npm install ngx-translate-messageformat-compiler

yarn add ngx-translate-messageformat-compiler

pnpm add ngx-translate-messageformat-compiler

Imports

TranslateMessageFormatCompiler

wrong

const { TranslateMessageFormatCompiler } = require('ngx-translate-messageformat-compiler')

correct

import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'

ESM-only module; use named import

MESSAGE_FORMAT_CONFIG

wrong

import { MESSAGE_FORMAT_CONFIG } from '@ngx-translate/core'

correct

import { MESSAGE_FORMAT_CONFIG } from 'ngx-translate-messageformat-compiler'

Injection token from this library, not from ngx-translate

TranslateMessageFormatCompiler

wrong

import TranslateMessageFormatCompiler from 'ngx-translate-messageformat-compiler'

correct

import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'

Default export not available; must use named import

Quickstart

Setup ngx-translate-messageformat-compiler in Angular standalone bootstrap with custom config

import { bootstrapApplication } from '@angular/platform-browser';
import { provideTranslateCompiler, provideTranslateService } from '@ngx-translate/core';
import { TranslateMessageFormatCompiler, MESSAGE_FORMAT_CONFIG } from 'ngx-translate-messageformat-compiler';
import { MyAppComponent } from './my-app.component';

bootstrapApplication(MyAppComponent, {
  providers: [
    provideTranslateService({
      compiler: provideTranslateCompiler(TranslateMessageFormatCompiler),
    }),
    {
      provide: MESSAGE_FORMAT_CONFIG,
      useValue: {
        throwOnError: true,
        formatters: { upcase: (v) => v.toUpperCase() },
      },
    },
  ],
});