Giter VIP home page Giter VIP logo

ng-merge-i18n's Introduction

Merge Angular Translation

Default Angular extract-i18n is just extracting the messages of the source locale. You need to manually create files for the other locales.

This library will help you to create files of the other locales and merge the translations from the source.

Features

  • Currently support json format of the translation source.
  • Create and update other translation files automatically.
  • Remove source after translations have been merged.
  • Sort translation messages by ascending.
  • Remove unused translation messages.

Installation

Install as a devDependencies by following command.

npm install ng-merge-i18n --save-dev

Configuration

Step 1

By default, angular.json has a builder target named extract-i18n. This library relies on it to get the options. Make sure to specify the options format to json since we're currently support this format.

{
  // ...
  "projects": {
    "project-name": {
      // ...
      "architect": {
        // ...
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "project-name:build",
            "format": "json" // <-- Specify format to json
          }
        }
        // ...
      }
    }
  }
}

You can also define the other options such as outputPath and outFile. The library will detect those options to get the source file. If not provided, the default value of the extract-i18n will be used.

  • outputPath, default to root directory of your project.
  • outFile, default to messages.[format], example: messages.json.

Step 2

Define locales on i18n option in the project (see Angular Internationalization docs). The translation targets will be placed based on the path you provide for each locale.

{
  // ...
  "projects": {
    "project-name": {
      // ...
      "i18n": {
        "sourceLocale": "en-US", // <-- This is optional
        "locales": {
          "id": "assets/locales/id.json",
          "it": "assets/locales/it.json"
        }
      },
      "architect": {
        // ...
      }
    }
  }
}

Notes:

  • For json format of the source file, the locale value will follows the locale key of the locales.

    For example, the locale keys from code example above are id and it. Then the locale value for each locale will use those keys on the translation target files.

    // id.json file
    {
      "locale": "id",
      "translations": {}
    }
    // it.json file
    {
      "locale": "it",
      "translations": {}
    }

Step 3

Add builder target for merging the translations. The builder name is "ng-merge-i18n:merge". And the builder target name can be "merge-i18n" (recommended), but you can name it whatever you want.

{
  // ...
  "projects": {
    "project-name": {
      // ...
      "architect": {
        // ...
        "merge-i18n": {
          "builder": "ng-merge-i18n:merge"
        }
      }
    }
  }
}

Additionally, you can provide the builder options to the target.

{
  "merge-i18n": {
    "builder": "ng-merge-i18n:merge",
    "options": {
      // Provide options here. See available options below.
    }
  }
}

Available builder options:

option default value description
builderTarget "extract-i18n" Provide this option if you're changing the default extract-i18n builder target name.
sort "push" Sort translation messages in target translation files.
Supported:
- "push" (append new translation messages at the end).
- "asc" (sort by id in ascending order).
removeUnusedTranslation false Whether to remove unused translation messages on the target translation files.
removeSource false Whether to remove the translation source file after translation messages have been merged.

Merge Translation

The translation source file need to be exist before merging the translations. So, you need to extract i18n first then merge the translations.

Extract I18n:

npm run ng extract-i18n

Merge Translation: Should provide the project name that run the target. The format is "ng run [projectName]:merge-i18n".

npm run ng run project-name:merge-i18n

Alternative Usage

Rather than run merge command manually, it can be used as post script in package.json.

{
  "scripts": {
    "extract-i18n": "ng extract-i18n",
    "postextract-i18n": "ng run project-name:merge-i18n"
  }
}

After extracting, it will merge the translations.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.