{"id":25991,"library":"ngx-translate-formatjs-compiler","title":"ngx-translate-formatjs-compiler","description":"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.","status":"active","version":"1.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/stefanseeger/ngx-translate-formatjs-compiler","tags":["javascript","angular","translate","messageformat","@ngx-translate","format.js","typescript"],"install":[{"cmd":"npm install ngx-translate-formatjs-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add ngx-translate-formatjs-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add ngx-translate-formatjs-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for ICU message formatting","package":"intl-messageformat","optional":false},{"reason":"peer dependency - core translation module","package":"@ngx-translate/core","optional":false},{"reason":"peer dependency - Angular core","package":"@angular/core","optional":false},{"reason":"peer dependency - Angular common","package":"@angular/common","optional":false}],"imports":[{"note":"ES module import; requires Angular >=10 and @ngx-translate/core >=13.","wrong":"const TranslateFormatJsCompiler = require('ngx-translate-formatjs-compiler');","symbol":"TranslateFormatJsCompiler","correct":"import { TranslateFormatJsCompiler } from 'ngx-translate-formatjs-compiler';"},{"note":"TranslateModule and TranslateCompiler are from @ngx-translate/core, not this package.","wrong":"import { TranslateModule } from 'ngx-translate-formatjs-compiler';","symbol":"TranslateModule","correct":"import { TranslateModule, TranslateCompiler } from '@ngx-translate/core';"},{"note":"TranslateCompiler is a provider token from @ngx-translate/core.","wrong":"import { TranslateCompiler } from 'ngx-translate-formatjs-compiler';","symbol":"TranslateCompiler","correct":"import { TranslateCompiler } from '@ngx-translate/core';"}],"quickstart":{"code":"// app.module.ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { TranslateCompiler, TranslateModule } from '@ngx-translate/core';\nimport { TranslateFormatJsCompiler } from 'ngx-translate-formatjs-compiler';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    TranslateModule.forRoot({\n      compiler: {\n        provide: TranslateCompiler,\n        useClass: TranslateFormatJsCompiler\n      }\n    })\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n\n// translation file example (en.json):\n{\n  \"welcome\": \"Hello, {name}! You have {count, plural, one {# message} other {# messages}}.\"\n}","lang":"typescript","description":"Setup of TranslateFormatJsCompiler in Angular app module and example ICU message translation."},"warnings":[{"fix":"Use '<h1>'Your content'</h1>' instead of <h1>Your content</h1>","message":"HTML tags in translations must be escaped with single quotes","severity":"gotcha","affected_versions":"*"},{"fix":"Use {variable} instead of {{variable}}","message":"Interpolation variables use single brackets, not double curly braces","severity":"gotcha","affected_versions":"*"},{"fix":"Upgrade to version >=1.0.0 and ensure your project uses compatible versions.","message":"Version 1.0.0 introduced breaking changes in peer dependencies (intl-messageformat >=10, @ngx-translate/core >=13)","severity":"deprecated","affected_versions":"<1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"npm install intl-messageformat","cause":"Missing intl-messageformat peer dependency","error":"ERROR in node_modules/ngx-translate-formatjs-compiler/lib/translate-formatjs-compiler.d.ts:1:63 - error TS2307: Cannot find module 'intl-messageformat'."},{"fix":"Ensure you configure TranslateModule.forRoot with compiler: { provide: TranslateCompiler, useClass: TranslateFormatJsCompiler }","cause":"TranslateFormatJsCompiler not provided in NgModule's compiler","error":"NullInjectorError: No provider for TranslateCompiler!"},{"fix":"Validate your translation JSON files; ensure ICU expressions are correctly formed.","cause":"Translation file not in valid JSON format or ICU syntax error","error":"Error: SyntaxError: Expected a double-quoted property name in JSON at position ..."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}