Nautical Poseidon Mythology
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    angular2-i18next-forkpublic

    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,
            ...
        ],
        ...
    })
    export class ApplicationModule {
    }

    app.ts

    import {TranslateI18Next} from 'angular2-i18next/index';
     
    @Component({
      selector: 'app'
      ...
    });
    export class App {
     
        private appleCount: number;
        ...
        
        viewReady:boolean = false;
        
        constructor(private translateI18Next:TranslateI18Next) {
            translateI18Next.init({
                debug: true,                                                        // optional
                returnEmptyString: false,                                           // optional - but.. it's important, please see http://i18next.com/docs/options/!
                mapping: {"specific_backend_message": "message_for_translate"},     // optional
                browserLanguageDetector: 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.json
                backend: 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)

    class Products {
     
        static NAME:string = "Name";
        ...
    }
     
    export class I18nModule {
        static PRODUCTS = Products;
    }

    Use i18next-parser (gulp task)

    var gulp = 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.

    install

    npm i angular2-i18next-fork

    Downloadslast 7 days

    4

    version

    1.0.6

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar