Angular-l10n library or i18n-behavior for Ionic 4 Web Components?

I need to internationalize my PWA built with Ionic 4 web components using Stencil. Basically have my web-shop in several languages, currencies, SEO routing etc. I’ve previously used for an Angular project. But as I’m using web components now, shall I maybe use instead? Anyone who has any experience with that?

My web-shop will both be a PWA, Android app, IOS app.

What I liked with the angular-l10n library was:
The translation text can be retrieved via directives or pure pipes, e.g:


tooltip="{{ ‘cart-checkout.invalid-input’ | translate:lang }}"

Or in a component class, e.g:


template: <h1> {{ title }} </h1> <button (click)="getTranslation()">Translate</button>
export class HomeComponent {
title: string;
constructor(public translation: TranslationService) { }
getTranslation(): void {
this.title = this.translation.translate(‘Title’);

Using Html tags in the JSON translations file

Using directives:
<span [innerHTML]="‘cart-checkout.p-1b-error-box2-cart’" l10nTranslate>

Using pipes:

Using variables in translations

JSON file:
“defaults-are-min”: “Defaults are Min {{defaultMin}} and Max {{defaultMax}}.”,


  • {{ 'update-user-settings.defaults-are-min' | translate:lang: {defaultMin: defaultMin, defaultMax: defaultMax} }}