Ngx-translate-formatjs-compiler NPM

ngx-translate-formatjs-compiler

Format.js based @ngx/translate compiler.

Supports Angular >= 10

Install

npm i --save intl-messageformat @ngx-translate/core ngx-translate-formatjs-compiler

Integration in @ngx/translate/core

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';

import { AppComponent } from './app';

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

Troubleshooting

With FormatJS HTML tags must be escaped with a ' in the translation. E.g. '<h1>'Your content goes here'</h1>'
With FormatJS interpolation variables are surrounded by single brackets. E.g. I am having {count} cats