dfx-transloco-markup

21.0.0 verified Fri May 01 auth: no javascript

Angular component for rendering translations with markup as an extension for Transloco (v21, Angular 21+, Transloco 8). Fork of ngx-transloco-markup, providing a <transloco> component that supports inline HTML-like markup in translation strings without innerHTML or splitting translations. Ships TypeScript types, published in Angular Package Format. Release cadence aligns with Angular major versions. Key differentiators: extensible transpiler architecture, automatic context detection, no XSS risk compared to [innerHTML].

Common errors

error NullInjectorError: No provider for TranslocoMarkupComponent! ↓

cause Missing import of TranslocoMarkupModule in standalone component or NgModule.

fix

Either import TranslocoMarkupModule in your standalone component's imports, or add it to your NgModule imports.

error Error: Transloco must be configured before using dfx-transloco-markup ↓

cause Transloco is not initialized before using the component.

fix

Add TranslocoRootModule or provideTransloco in your app configuration.

error TypeError: Cannot read properties of undefined (reading 'params') ↓

cause Translation key missing or params not passed correctly.

fix

Make sure the translation key exists and params is an object if used.

Warnings

breaking Breaking changes in v21: Angular 21 required, Transloco 8 required. Older versions incompatible. ↓

fix Upgrade to Angular 21 and Transloco 8. Use dfx-transloco-markup 21.x.

breaking Peer dependency on @jsverse/transloco 8.x. Version mismatch causes runtime errors. ↓

fix Ensure @jsverse/transloco version matches ^8.0.0.

deprecated Legacy Transloco versions (<5) are not supported. The library rebrands to @jsverse/transloco. ↓

fix Use @jsverse/transloco 8.x and dfx-transloco-markup 21.x.

gotcha Custom transpilers must be provided via dependency injection or provideTranslocoMarkup(). Not configuring them leads to missing rendered markup. ↓

fix Add custom transpiler classes to the providers array.

gotcha The component uses a custom tokenizer sensitive to whitespace. malformed tags may be silently dropped. ↓

fix Ensure tags are properly closed and nested.

Install

npm install dfx-transloco-markup

yarn add dfx-transloco-markup

pnpm add dfx-transloco-markup

Imports

TranslocoMarkupComponent

wrong

import TranslocoMarkupComponent from 'dfx-transloco-markup'

correct

import { TranslocoMarkupComponent } from 'dfx-transloco-markup'

Named export, not default. Used as Angular component selector <transloco>.

TranslocoMarkupModule

wrong

import TranslocoMarkupModule from 'dfx-transloco-markup'

correct

import { TranslocoMarkupModule } from 'dfx-transloco-markup'

Module to import for Angular compatibility, typically in standalone or NgModule.

provideTranslocoMarkup

wrong

import { provideTranslocoMarkup } from '@jsverse/transloco'

correct

import { provideTranslocoMarkup } from 'dfx-transloco-markup'

Function to provide markup transpilers in standalone Angular applications.

Quickstart

Basic usage of the <transloco> component with a translation key and parameter interpolation, including markup like <b>.

import { Component } from '@angular/core';
import { TranslocoMarkupModule } from 'dfx-transloco-markup';

// In your translation file (e.g., en.json):
// { "welcome": "Hello <b>{{name}}</b>!" }

@Component({
  standalone: true,
  imports: [TranslocoMarkupModule],
  template: `
    <transloco key="welcome" [params]="{ name: username }" />
  `
})
export class MyComponent {
  username = 'Alice';
}