Registry / web-framework / ngx-translate-formatjs-compiler

ngx-translate-formatjs-compiler

JSON →
library1.0.8jsnpmunverified

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.

npm install ngx-translate-formatjs-compiler
INSTALL
IMPORT
SIG · NGX-TRANSLATE-FORM
N
ngx-translate-formatjs-compiler
web-frameworkjavascriptv1.0.8
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

TranslateFormatJsCompiler
import { TranslateFormatJsCompiler } from 'ngx-translate-formatjs-compiler';
const TranslateFormatJsCompiler = require('ngx-translate-formatjs-compiler');
ES module import; requires Angular >=10 and @ngx-translate/core >=13.
TranslateModule
import { TranslateModule, TranslateCompiler } from '@ngx-translate/core';
import { TranslateModule } from 'ngx-translate-formatjs-compiler';
TranslateModule and TranslateCompiler are from @ngx-translate/core, not this package.
TranslateCompiler
import { TranslateCompiler } from '@ngx-translate/core';
import { TranslateCompiler } from 'ngx-translate-formatjs-compiler';
TranslateCompiler is a provider token from @ngx-translate/core.

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}}." }
Debug
Known issues
gotchaHTML tags in translations must be escaped with single quotes
fix
Use '<h1>'Your content'</h1>' instead of <h1>Your content</h1>
affects: *
gotchaInterpolation variables use single brackets, not double curly braces
fix
Use {variable} instead of {{variable}}
affects: *
deprecatedVersion 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.
affects: <1.0.0
Errors
Common errors & fixes
ERROR in node_modules/ngx-translate-formatjs-compiler/lib/translate-formatjs-compiler.d.ts:1:63 - error TS2307: Cannot find module 'intl-messageformat'.
Missing intl-messageformat peer dependency
fix
npm install intl-messageformat
NullInjectorError: No provider for TranslateCompiler!
TranslateFormatJsCompiler not provided in NgModule's compiler
fix
Ensure you configure TranslateModule.forRoot with compiler: { provide: TranslateCompiler, useClass: TranslateFormatJsCompiler }
Error: SyntaxError: Expected a double-quoted property name in JSON at position ...
Translation file not in valid JSON format or ICU syntax error
fix
Validate your translation JSON files; ensure ICU expressions are correctly formed.
Upgrade
Version history
1.0.8latest on npm
Audit
Dependencies
intl-messageformatrequiredpeer dependency for ICU message formatting
@ngx-translate/corerequiredpeer dependency - core translation module
@angular/corerequiredpeer dependency - Angular core
@angular/commonrequiredpeer dependency - Angular common
Agent activity
2 hits · last 30 days
node
2
Resources
ngx-translate-formatjs-compiler — npm install ngx-translate-formatjs-compiler · libregistry