angular2-i18next

An implementation of i18next wrapper for Angular2 [2.2.2 & AoT compatible].

Installation

First you need to install the npm modules:

npm install ts-smart-logger --save
npm install angular2-i18next --save

Demo

1 git clone --progress -v "git@github.com:apoterenko/angular2-i18next.git" "D:\sources"
2 cd D:\sources\angular2-i18next\demo
3 npm install
4 npm start

Use

main.ts

import{TranslateI18NextModule}from'angular2-i18next/index';
@NgModule({bootstrap: [ApplicationComponent],imports: [TranslateI18NextModule,
...
],
...
})exportclassApplicationModule{}

app.ts

Call translateI18Next.init({ ... }) with the options you want to initialize i18next with.

You can also pass the special options use and defaultUse which are each Arrays that may contain "plugins" such as a cache or backend you wish to use. See .use method of i18next.

The default plugins for defaultUse are [i18nextXHRBackend, browserLanguageDetectorCtor]

import{TranslateI18Next}from'angular2-i18next/index';
@Component({selector: 'app'...});exportclassApp{privateappleCount: number;
...
viewReady:boolean=false;constructor(privatetranslateI18Next:TranslateI18Next){translateI18Next.init({debug: true,// optionalreturnEmptyString: false,// optional	- but.. it's important, please see http://i18next.com/docs/options/!mapping: {"specific_backend_message": "message_for_translate"},// optionalbrowserLanguageDetector: injectableCustomLanguageDetectorService,// optional - the specific application language detector (allows you to return the language of the user.// If it is absent, the service uses default "angular2 locale detector" behaviour using LOCALE_ID. // supportedLanguages: ['en', 'pt'], // Therefore you can pass the optional supportedLanguages parameter which indicates your supported languages. // For example, LOCALE_ID = 'en-AU' or 'en-US' or 'en', you can pass only ['en'] -> locales/en/translation.json// LOCALE_ID = 'pt-BR' or 'pt', you can pass only ['pt'] -> locales/pt/translation.jsonbackend: injectableBackendConfigFactory// optional - allows to change "loadPath" i18next parameter}).then(()=>{this.viewReady=true;});}}

app.html

<div*ngIf="viewReady" [innerHTML]='"<span style=\"color:red;\">You have {count} apple</span>" | translate:{count: appleCount}'></div>

src/locales/en/translation.json

{
"<span style=\"color:red;\">You have {count} apple</span>": "<span style=\"color:red;\">You have {count} apple</span>",
"<span style=\"color:red;\">You have {count} apple</span>_plural": "<span style=\"color:red;\">You have {count} apples</span>"
}

src/locales/ru/translation.json

{
"<span style=\"color:red;\">You have {count} apple</span>": "<span style=\"color:green;\">У вас есть одно яблоко</span>",
"<span style=\"color:red;\">You have {count} apple</span>_2": "<span style=\"color:blue;\">У вас есть {count} яблока</span>",
"<span style=\"color:red;\">You have {count} apple</span>_5": "<span style=\"color:yellow;\">У вас есть {count} яблок</span>"
}

I18nModule.ts (the localized constants at the typescript files)

classProducts{staticNAME:string="Name";
...
}exportclassI18nModule{staticPRODUCTS=Products;}

Use i18next-parser (gulp task)

vargulp=require('gulp'),i18next=require('i18next-parser');gulp.task('i18next',function(){gulp.src(['src/**/*.html','src/*.html','src/locales/I18nModule.ts']).pipe(i18next({locales: ['en'],output: '../src/locales',// The workaround (i18next-parser does not support "namespaceSeparator === false" flag):// options.namespaceSeparator || ':';// options.keySeparator || '.';keySeparator: "eb6c8400-b5f8-4177-a417-5e5e902a6c83",namespaceSeparator: "eb6c8400-b5f8-4177-a417-5e5e902a6c83",// Supported patterns:// 1) The gettext format like << 'Hello {{count}} world!' | translate:{count: 100} >>// 2) The I18nModule format like << static YOUR_CONSTANT:string = "Your value..."; >>// 3) The inner html format << <div [innerHTML]='"<span style=\"color:red;\">You have {count} apple</span>" | translate:{count: appleCount}'></div> >>parser: '\'(.+)\'.+translate|static [A-Z_0-9 ]+\: {0,}string \= ["|\'](.+)["|\']|\\[innerHTML\\]\=\'\"(.+)\" +\\|'})).pipe(gulp.dest('src/locales'));});

Publish

npm run deploy

License

Licensed under MIT.