The alternative internationalization (i18n) library for Angular

Overview

NGX Locutus

  • The alternative Angular Translation Library used for large scale microfrontend translations.
  • No more worrying about shared translation assets.
  • Truly independent translations.
  • Lazy loaded translations.
  • Scopes by default.

Demo

A project named demo is inside the projects folder which should explain the most basic concepts.

Installation

npm install ngx-locutus --save

Usage

Translation files

Locutus uses Typescript constants as translation files. It is suggested to create an interface definition for each translation and let the explicit translation constant be of the interface type.

Suggested file structure:

|--assets

|----i18n

|------scope1

|--------en.ts

|--------de.ts

|--------scope1.ts

scope1.ts includes the interface definition for the translation object and also defines an array of TranslationLoaders. It is of big importance that the loaders do reference the translation files in a hardcoded manner such that the files will not be tree-shaken.

export const Scope1Loaders: TranslationLoader[] = [
  { de: () => from(import('./de').then(t => t.DE)) },
  { en: () => from(import('./en').then(t => t.EN)) }
];

Import LocutusModule

Call forRoot() in your AppModule and forChild in each feature module.

  • forRoot needs a TranslationConfiguration consisting of the scope-name, translation-loaders and the active language
  • forChild needs a TranslationConfiguration consisting of the scope-name, translation-loaders

AppModule Import:

 LocutusModule.forRoot([{
  loaders: Scope1Loaders,
  scope: 'scope1',
  language: 'de'
}])

Feature Module Import:

LocutusModule.forChild([{
  scope: 'picard',
  loaders: PicardLoaders
}])

Translation API

Use the locutus directive to make translations in your template:

<ng-container *locutus="let t of 'scope1'">
  {{t.title}}
</ng-container>

Or use the pipe:

{{ 'title' | locutus:'scope1' | async }}

Or in the code using the LocutusService:

To retrieve a specific key in a scope:

this.title$ = this.locutus.translate('scope1', 'title');

To retrieve an entire scope:

this.scope1$ = this.locutus.getTranslations('scope1');

Lazy Loaded Modules

If you have a lazy loaded module, please make sure that you define the LazyLocutusGuard on the route. Since the translation configurations are registered using APP_INITIALIZER, which is only called once when the application is bootstrapped, you will have to use the guard to register the translation configuration specified in the forChild method.

imports: [
  CommonModule,
  RouterModule.forChild([
    {
      path:  '',
      canActivate: [LazyLocutusGuard],
      component:  PicardComponent
    }
  ]),
  LocutusModule.forChild([{
    scope:  'picard',
    loaders:  PicardLoaders
  }])
]
You might also like...

ICU MessageFormat for Javascript - i18n Plural and Gender Capable Messages

messageformat The experience and subtlety of your program's text can be important. Messageformat is a mechanism for handling both pluralization and ge

Dec 23, 2022

ICU MessageFormat for Javascript - i18n Plural and Gender Capable Messages

messageformat The experience and subtlety of your program's text can be important. Messageformat is a mechanism for handling both pluralization and ge

Dec 23, 2022

Gettext Style i18n for Modern JavaScript Apps

Jed Gettext Style i18n for Modern JavaScript Apps For more info

Dec 14, 2022

A simple library used to handle our multi-language needs.

Vespucci Multiplayer - i18n Integration A simple library used to handle our multi-language needs. ⚠️ Important! This is a very simple implementation o

Feb 7, 2022

⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

Jan 4, 2023

Internationalization for react done right. Using the i18next i18n ecosystem.

Internationalization for react done right. Using the i18next i18n ecosystem.

react-i18next IMPORTANT: Master Branch is the new v10 using hooks. $ v10.0.0 npm i react-i18next react-native: To use hooks within react-native, you m

Jan 9, 2023

Internationalization for react done right. Using the i18next i18n ecosystem.

Internationalization for react done right. Using the i18next i18n ecosystem.

react-i18next IMPORTANT: Master Branch is the new v10 using hooks. $ v10.0.0 npm i react-i18next react-native: To use hooks within react-native, you m

Dec 30, 2022

Type-safe internationalization (i18n) for Next.js

Type-safe internationalization (i18n) for Next.js

Type-safe internationalization (i18n) for Next.js Features Usage Examples Scoped translations Change current locale Use JSON files instead of TS for l

Dec 22, 2022

i18n-language.js is Simple i18n language with Vanilla Javascript

i18n-language.js i18n-language.js is Simple i18n language with Vanilla Javascript Write by Hyun SHIN Demo Page: http://i18n-language.s3-website.ap-nor

Jul 12, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

Extract and merge i18n xliff translation files for angular projects.

Angular extract i18n and merge This extends Angular CLI to improve the i18n extraction and merge workflow. New/removed translations are added/removed

Jan 5, 2023

Merges XLIFF 1.2/2.0 files. Usable for Angular i18n automation.

XLIFF Simple Merge This program automates the merging of XLIFF files (version 1.2 and 2.0). New translations from the input file (e.g. "messages.xlf")

Dec 15, 2022

🌐jQuery based internationalization library

jQuery.i18n NOTE: For jquery independent version of this library, see https://github.com/wikimedia/banana-i18n jQuery.i18n is a jQuery based Javascrip

Jan 4, 2023

A general purpose internationalization library in 292 bytes

A general purpose internationalization library in 292 bytes

A general purpose internationalization library in 298 bytes! Features Simple and Familiar API Unobstrusive and Unopinionated Less than 300 bytes – inc

Dec 21, 2022

A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.

A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.

🌍 typesafe-i18n A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects. Advantages 🐤 lightwe

Jan 4, 2023

Simplest ever I18N 1 KB library for HTML/JavaScript apps.

Simplest ever I18N 1 KB library for HTML/JavaScript apps.

Ultimate I18n JS 🤯 Ultimate internationalization library for web applications. Super simple & easy. Less than 1KB (minified and gziped). 0 dependenci

Dec 22, 2022

Angular Library workspace to creating and testing angular libraries

Library Workspace Run Locally Clone the project https://github.com/sametcelikbicak/library-workspace.git Go to the library project directory cd li

Nov 1, 2022
Comments
  • WORKAROUND: Indirectly lazy loaded module

    WORKAROUND: Indirectly lazy loaded module

    If you have are using a component of Module A inside a lazy loaded module, the translations of Module A do not work right away, because although Module A is not directly lazy loaded, it is still indirectly lazy loaded by the parent module that itself is lazy loaded.

    A current workaround for such an issue would be this:

    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        DragDropModule,
        PrimengModule,
        LocutusModule
      ],
      exports: [FieldComponent, ViewEditorComponent],
      declarations: [FieldComponent, ViewEditorComponent]
    })
    export class ViewEditorModule {
      constructor(private locututs: LocutusService) {
        this.locututs.registerChild({
          scope: 'tooltip',
          loaders: TOOLTIP_LOADERS
        });
        this.locututs.registerChild({
          scope: 'view-editor',
          loaders: VIEW_EDITOR_LOADERS
        });
      }
    }
    
    wontfix 
    opened by HaasStefan 1
  • LazyLocutusGuard with independent scope

    LazyLocutusGuard with independent scope

    Instead of being dependent on the configuration inside the forChild() function defined in the same Module it shoud be possible to pass the configuration into the routeguard as static data such that the route guard can be used outisde of the lazy loaded module.

    enhancement 
    opened by HaasStefan 1
Releases(v1.0.1)
  • v1.0.1(May 24, 2022)

  • v1.0.0(May 24, 2022)

    • replace scope
    • LazyLocutusGuard removed
    • translation interpolation
    • performance
    • multiple scope initialisations bug fix

    What's Changed

    • Version/1.0.0 by @HaasStefan in https://github.com/HaasStefan/ngx-locutus/pull/12

    Full Changelog: https://github.com/HaasStefan/ngx-locutus/compare/v0.0.5...v1.0.0

    Source code(tar.gz)
    Source code(zip)
  • v0.0.5(May 23, 2022)

    What's Changed

    • github readme updated by @HaasStefan in https://github.com/HaasStefan/ngx-locutus/pull/8
    • Bug fix: forChild configuration registration by @HaasStefan in https://github.com/HaasStefan/ngx-locutus/pull/11

    Full Changelog: https://github.com/HaasStefan/ngx-locutus/compare/v0.0.4...v0.0.5

    Source code(tar.gz)
    Source code(zip)
  • v0.0.4(May 23, 2022)

    What's Changed

    • Feature/multi scopes by @HaasStefan in https://github.com/HaasStefan/ngx-locutus/pull/7

    Full Changelog: https://github.com/HaasStefan/ngx-locutus/compare/v0.0.3...v0.0.4

    Source code(tar.gz)
    Source code(zip)
  • v0.0.3(May 22, 2022)

    What's Changed

    • demo section added by @HaasStefan in https://github.com/HaasStefan/ngx-locutus/pull/4
    • Create LICENSE.md by @HaasStefan in https://github.com/HaasStefan/ngx-locutus/pull/5
    • added MIT license to npm package.json by @HaasStefan in https://github.com/HaasStefan/ngx-locutus/pull/6

    Full Changelog: https://github.com/HaasStefan/ngx-locutus/compare/v0.0.2...v0.0.3

    Source code(tar.gz)
    Source code(zip)
  • v0.0.2(May 22, 2022)

    What's Changed

    • Feature/initial by @HaasStefan in https://github.com/HaasStefan/ngx-locutus/pull/1
    • Basic functionality by @HaasStefan in https://github.com/HaasStefan/ngx-locutus/pull/2
    • Release/version01 by @HaasStefan in https://github.com/HaasStefan/ngx-locutus/pull/3

    New Contributors

    • @HaasStefan made their first contribution in https://github.com/HaasStefan/ngx-locutus/pull/1

    Full Changelog: https://github.com/HaasStefan/ngx-locutus/commits/v0.0.2

    Source code(tar.gz)
    Source code(zip)
Owner
Stefan Haas
Stefan Haas
Type-safe internationalization (i18n) for Next.js

Type-safe internationalization (i18n) for Next.js Features Usage Examples Scoped translations Change current locale Use JSON files instead of TS for l

Tom Lienard 251 Dec 22, 2022
Extract and merge i18n xliff translation files for angular projects.

Angular extract i18n and merge This extends Angular CLI to improve the i18n extraction and merge workflow. New/removed translations are added/removed

Daniel Schreiber 86 Jan 5, 2023
Merges XLIFF 1.2/2.0 files. Usable for Angular i18n automation.

XLIFF Simple Merge This program automates the merging of XLIFF files (version 1.2 and 2.0). New translations from the input file (e.g. "messages.xlf")

Daniel Schreiber 9 Dec 15, 2022
🌐jQuery based internationalization library

jQuery.i18n NOTE: For jquery independent version of this library, see https://github.com/wikimedia/banana-i18n jQuery.i18n is a jQuery based Javascrip

Wikimedia 649 Jan 4, 2023
A general purpose internationalization library in 292 bytes

A general purpose internationalization library in 298 bytes! Features Simple and Familiar API Unobstrusive and Unopinionated Less than 300 bytes – inc

Luke Edwards 713 Dec 21, 2022
human friendly i18n for javascript (node.js + browser)

BabelFish - human friendly i18n for JS Internationalisation with easy syntax for node.js and browser. Classic solutions use multiple phrases for plura

Nodeca 246 Nov 20, 2022
lightweight jQuery plugin for providing internationalization to javascript from ‘.properties’ files

jQuery.i18n.properties About jQuery.i18n.properties is a lightweight jQuery plugin for providing internationalization to javascript from ‘.properties’

null 408 Dec 25, 2022
:globe_with_meridians: Internationalization plugin for Vue.js

vue-i18n Internationalization plugin for Vue.js ?? Gold Sponsors ?? Silver Sponsors ?? Bronze Sponsors ⚠️ NOTICE This repository is for Vue I18n v8.x.

kazuya kawaguchi 6.9k Dec 29, 2022
A JavaScript Internationalization Framework

FBT is an internationalization framework for JavaScript designed to be not just powerful and flexible, but also simple and intuitive. It helps with th

Facebook 3.8k Jan 8, 2023
🌍📖 A readable, automated, and optimized (5 kb) internationalization for JavaScript

Linguijs ?? ?? A readable, automated, and optimized (5 kb) internationalization for JavaScript Documentation · Documentation 2.x · Quickstart · Exampl

Lingui 3.5k Jan 2, 2023