@conclurer/i18n
v0.0.1
Published
This module allows you to provide translations to an application or module.
Downloads
3
Keywords
Readme
Internationalization Module
This module allows you to provide translations to an application or module.
Basic Concepts
Internationalization Module uses the following elements to provide translations:
LANGUAGE_SCHEMAS
allow you to define languages and language modelsTRANSLATION_SOURCES
defines sources for translation filesUSER_LANGUAGE
provides the current user's languageTRANSLATION_NAMESPACE
provides the namespace of language variables inside feature modulesTRANSLATION_LIBRARIES
defines third-party libraries that shall be translated along the first-party modules.
How to use
// app.module.ts
import { NgModule } from '@angular/core';
import { InternationalizationModule } from '@conclurer/i18n';
@NgModule({
imports: [
InternationalizationModule.forRoot({
supportedLanguages: [
{
code: 'de-de',
simplifiedCode: 'de',
pluralization: n => (n === 1 ? 'one' : 'other'),
},
],
userLanguage: {
code: 'de-de',
simplifiedCode: 'de',
},
libraryTranslation: [
locale => {
// todo translate third-party library on language change
},
],
translationSources: [
locale => import(`./_i18n/${locale.simplifiedCode}.json`).then(m => m.default),
],
}),
],
})
export class AppModule {}
// de.json
{
"greeting": "Hallo Welt",
"messages": {
"notification": {
"one": "%{count} Benachrichtigung",
"other": "%{count} Benachrichtigungen"
}
}
}
<!-- <h1>Hallo Welt</h1> -->
<h1>{{ 'greeting' | t }}</h1>
<!-- <p>5 Benachrichtigungen</p> -->
<p>{{ 'messages.notification' | t: {count: 5} }}</p>
Usage in Feature Modules
In feature modules, you should define a special provider that can then be provided directly into the target components.
It is not possible to import feature module providers in NgModules
s that are not imported using Angular's router.
This is because Angular attaches child module providers to the root injector.
import { InternationalizationModule } from '@conclurer/i18n';
export const FEATURE_MODULE_TRANSLATIONS = InternationalizationModule.exportedComponentProviders({
localNamespace: 'featureModuleNamespace',
translationSources: [
locale => import(`./feature/_i18n/${locale.simplifiedCode}.json`).then(m => m.default),
],
});
// feature/_i18n/de.json
{
"example": "Feature Module Example"
}
// Feature component
import { Component } from '@angular/core';
@Component({
providers: [
FEATURE_MODULE_TRANSLATIONS,
],
})
export class FeatureComponent {}
<!-- This uses the global namespace -->
<h1>{{ 'greeting' | t }}</h1>
<!-- Local namespace -->
<!-- <h1>Feature Module Example</h1> -->
<h1>{{ '@.example' | t }}</h1>
<!-- Local lang var, accessed via global namespace -->
<!-- <h1>Feature Module Example</h1> -->
<h1>{{ 'featureModuleNamespace.example' | t }}</h1>