ngx-translate-formatjs-compiler

1.0.8 verified Fri May 01 auth: no javascript

A compiler for @ngx-translate/core that uses FormatJS (intl-messageformat) to enable ICU message syntax in Angular applications. Current stable version is 1.0.8, released in 2023. It supports Angular >=10 and @ngx-translate/core >=13. Key differentiators: provides full ICU message format support (plural, select, number formatting) compared to the default simple key-value interpolation. Release cadence is low (minor updates). Ships TypeScript types.

Common errors

error ERROR in node_modules/ngx-translate-formatjs-compiler/lib/translate-formatjs-compiler.d.ts:1:63 - error TS2307: Cannot find module 'intl-messageformat'. ↓

cause Missing intl-messageformat peer dependency

fix

npm install intl-messageformat

error NullInjectorError: No provider for TranslateCompiler! ↓

cause TranslateFormatJsCompiler not provided in NgModule's compiler

fix

Ensure you configure TranslateModule.forRoot with compiler: { provide: TranslateCompiler, useClass: TranslateFormatJsCompiler }

error Error: SyntaxError: Expected a double-quoted property name in JSON at position ... ↓

cause Translation file not in valid JSON format or ICU syntax error

fix

Validate your translation JSON files; ensure ICU expressions are correctly formed.

Warnings

gotcha HTML tags in translations must be escaped with single quotes ↓

fix Use '<h1>'Your content'</h1>' instead of <h1>Your content</h1>

gotcha Interpolation variables use single brackets, not double curly braces ↓

fix Use {variable} instead of {{variable}}

deprecated Version 1.0.0 introduced breaking changes in peer dependencies (intl-messageformat >=10, @ngx-translate/core >=13) ↓

fix Upgrade to version >=1.0.0 and ensure your project uses compatible versions.

Install

npm install ngx-translate-formatjs-compiler

yarn add ngx-translate-formatjs-compiler

pnpm add ngx-translate-formatjs-compiler

Imports

TranslateFormatJsCompiler

wrong

const TranslateFormatJsCompiler = require('ngx-translate-formatjs-compiler');

correct

import { TranslateFormatJsCompiler } from 'ngx-translate-formatjs-compiler';

ES module import; requires Angular >=10 and @ngx-translate/core >=13.

TranslateModule

wrong

import { TranslateModule } from 'ngx-translate-formatjs-compiler';

correct

import { TranslateModule, TranslateCompiler } from '@ngx-translate/core';

TranslateModule and TranslateCompiler are from @ngx-translate/core, not this package.

TranslateCompiler

wrong

import { TranslateCompiler } from 'ngx-translate-formatjs-compiler';

correct

import { TranslateCompiler } from '@ngx-translate/core';

TranslateCompiler is a provider token from @ngx-translate/core.

Quickstart

Setup of TranslateFormatJsCompiler in Angular app module and example ICU message translation.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateCompiler, TranslateModule } from '@ngx-translate/core';
import { TranslateFormatJsCompiler } from 'ngx-translate-formatjs-compiler';

@NgModule({
  imports: [
    BrowserModule,
    TranslateModule.forRoot({
      compiler: {
        provide: TranslateCompiler,
        useClass: TranslateFormatJsCompiler
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

// translation file example (en.json):
{
  "welcome": "Hello, {name}! You have {count, plural, one {# message} other {# messages}}."
}