README

Translate i18n for Angular 13+ / Ionic 5+

NPM npm (scoped)

Online translations for Angular 6+, Ionic 4+, web and mobile app projects, easy to maintain. Your translations always up to date. Forget ever to pubblish on App Stores again when a translation changes!

Made by developers for developers
Compatible with Angular 13+
Compatible with Ionic 5+
Strings always up to date
Automatic missing translations synchronization
Automatic language detection
1 app Free forever
Forget about excels, jsons, po files and other formats forever!

Check also other available libraries:

@blablatec/node-lang Translations available for node server strings
Coming soon @blablatec/js Translations available in pure js, you can use them with any framework or none at all

This is the Angular library to have internationalization strings always sync and up to date with blablatec.com.

This library requires @ngx-translate.

Usage

npm i @blablatec/ngx

Create a free account at blablatec.com

On app.module.ts:

import { TranslationsModule } from '@blablatec/ngx';

@NgModule({
    declarations: [
        AppComponent,
    ],
    entryComponents: [],
    imports: [
        BrowserModule,
        TranslationsModule.forRoot({
            // appId: environment.translatesAppId,
            // appSecret: environment.translatesAppSecret,
            apiUrl: environment.translatesApiUrl,
            tags: ['app'],
            missingTag: 'app',
        }),
        ...
    ],
    ...
})
export class AppModule {
    ...
}

On every module where translations should be used:

import { TranslationsModule } from '@blablatec/ngx';

@NgModule({
    imports: [
        TranslationsModule.forChild(),
        ...
    ],
    ...
})
export class SideNavPageModule { }

It will automatically expose all services from @ngx-translate module.

API

TranslationsModule.forRoot(options)

It will instantiate TranslateModule.forRoot with given options (see @ngx-translate). It uses also this additional options:

apiUrl {String}: Blablatec specific translates url (or your server one). It will be used to fetch all.json and post missing strings. Should be similar to https://blablatec.com/api/v1/application/5cd304201b35432d7e0bbeea. (Required)
missingTag {String}: Default tag to be applied to every missing string. Defaults to app.
tags {Array}: Array of tags to select the strings to download from server. Defaults to ['app'].
appId {String}: App ID to authorize app store apps. Should be similar to com.blablatec and is optained at (blablatec.com)[https://blablatec.com]. Defaults ''.
appSecret {String}: App Secret to authorize appId. Automatically generated at (blablatec.com)[https://blablatec.com]. Defaults ''.

TranslationsModule.forChild(options)

Same as forRoot but only includes missingTag and tags options.

TranslationsDownloadService

Used to set language for the app and the strings to be used:

import { TranslationsDownloadService } from '@blablatec/ngx';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
})
export class AppComponent {
    constructor(
        private platform: Platform,
        private translationsDownloadSvc: TranslationsDownloadService,
    ) {
        this.initializeApp();
    }

    async initializeApp() {
        try {
            await this.platform.ready();
            this.statusBar.styleDefault();

            // Setup translations
            this.translationsDownloadSvc.init(['es'], 'es');
        } catch (err) {
            console.log(`Error: ${err.message}`);
        }
    }
}

It will automatically call this two methods in TranslateService from @ngx-translate/core:

    this.translateSvc.setDefaultLang(lang);
    this.translateSvc.use(lang);

Assets

Put your default translations in assets/translations/all-en.json, modifying the en by the default languages. It is also recommended to place a assets/translations/all.json with default translations.

This module will automatically handle the loading of this translations for every selected language.

Roadmap

Develop cache & version for downloaded translations

License

The MIT License (MIT)

Copyright (c) 2019 AppFeel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Usage no npm install needed!