Registry / web-framework / dfx-transloco-markup

dfx-transloco-markup

library21.0.0jsnpmunverified

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].

web-framework

npm install dfx-transloco-markup

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · DFX-TRANSLOCO-MARK

dfx-transloco-markup

web-frameworkjavascriptv21.0.0

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.

TranslocoMarkupComponent

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

✗ import TranslocoMarkupComponent from 'dfx-transloco-markup'

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

TranslocoMarkupModule

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

✗ import TranslocoMarkupModule from 'dfx-transloco-markup'

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

provideTranslocoMarkup

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

✗ import { provideTranslocoMarkup } from '@jsverse/transloco'

Function to provide markup transpilers in standalone Angular applications.

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

Debug

Known issues

breakingBreaking 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.

affects: <21.0.0

breakingPeer dependency on @jsverse/transloco 8.x. Version mismatch causes runtime errors.

fix

Ensure @jsverse/transloco version matches ^8.0.0.

affects: >=21.0.0

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

fix

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

affects: <0.0.2

gotchaCustom 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.

affects: >=0.0.1

gotchaThe component uses a custom tokenizer sensitive to whitespace. malformed tags may be silently dropped.

fix

Ensure tags are properly closed and nested.

affects: >=0.0.1

Errors

Common errors & fixes

NullInjectorError: No provider for TranslocoMarkupComponent!

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: Transloco must be configured before using dfx-transloco-markup

Transloco is not initialized before using the component.

fix

Add TranslocoRootModule or provideTransloco in your app configuration.

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

Translation key missing or params not passed correctly.

fix

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

Upgrade

Version history

21.0.0latest on npm

Audit

Dependencies

@angular/commonrequiredAngular common module dependency

@angular/corerequiredAngular core dependency

@jsverse/translocorequiredTransloco core library required

rxjsrequiredReactive extensions required by Angular

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/Dafnik/dfx-common ↗

packagehttps://www.npmjs.com/package/dfx-transloco-markup ↗

homepagehttps://playground.dafnik.me/transloco-markup/ ↗