Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/navix/ngxe
📜 Angular 11.1+ JSON Translations Editor.
https://github.com/navix/ngxe
angular i18n internationalization localization translation translations
Last synced: about 2 months ago
JSON representation
📜 Angular 11.1+ JSON Translations Editor.
- Host: GitHub
- URL: https://github.com/navix/ngxe
- Owner: navix
- License: mit
- Created: 2021-01-20T16:27:49.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-02T13:59:16.000Z (8 months ago)
- Last Synced: 2024-11-18T23:53:23.830Z (about 2 months ago)
- Topics: angular, i18n, internationalization, localization, translation, translations
- Language: TypeScript
- Homepage: https://ngxe.oleksanovyk.com
- Size: 1020 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngxe - Angular 11.1+ JSON Translations Editor. (Table of contents / Angular)
- fucking-awesome-angular - ngxe - Angular 11.1+ JSON Translations Editor. (Table of contents / Angular)
- fucking-awesome-angular - ngxe - Angular 11.1+ JSON Translations Editor. (Table of contents / Angular)
README
[](https://www.npmjs.com/package/ngxe)
# 📜 ngxe
Angular 11.1+ JSON Translations Editor.
A simple UI for your translations: hosted on NPM, runs on your dev machine.
### Features
* Works directly with your files, no additional routine.
* Any number of locales.
* Diff changes.
* Filters, handy pagination.
* Suggestions based on similar sources.
* Themes: light, solarized, dark.
## Installation
```shell
$ npm i ngxe -D
```
## Usage
#### Create `ngxe.json` config file in the root:
```json
{
"name": "Project Name",
"input": "path/to/messages.json",
"output": {
"source": "path/to/messages.source.json",
"translations": [
{
"locale": "de",
"path": "path/to/messages.de.json"
}
]
}
}
```
* `input` - file generated by Angular, you can add it to `.gitignore`
* `output.source` - copy of the input file, but ordered by keys (need for further transitions and smooth committing to Git).
* `output.translations` - target locales.
#### Extract translations from your project in JSON format:
```shell
$ ng extract-i18n --format=json
```
The editor works best if i18n messages have IDs, but it is not necessary:
```
Message with ID
...
$localize`:@@MSG_ID_2:Message with ID 2`;
```
#### Use ngxe:
```shell
$ npx ngxe
```
Browser should open the app (http://localhost:7600/).
Use the ngxe app to update messages and press `Save Project` (all `output` files will be updated).
###### Optional config path:
```shell
$ npx ngxe -p=./path/to/ngxe.json
```
#### Build your app
1. You can use the default flow with separated build for each lang.
2. **Or** import messages on the app bootstrapping in `main.ts`:
```ts
import { loadTranslations } from '@angular/localize';
...
loadMessages()
.then(() => {
platformBrowserDynamic().bootstrapModule(AppModule);
})
.catch(err => console.error(err));
async function loadMessages() {
// Detect lang and compile proper path to messages here:
const path = ...;
const m = await import(path);
loadTranslations(m.translations);
}
```
## Config
Interface of the `ngxe.json` file: [meta/config.ts](/projects/meta/config.ts)
## Convert existing `xlf` files to `json`
```shell
$ npm i @locl/cli -D
$ npx locl convert -s=path/to/messages.de.xlf -f=json -o=path/to/messages.de.json
```
You can get error: `The translation file "path/to/messages.de.xlf" does not contain a target locale and no explicit locale was provided for this file.`
Make sure you have the `target-language` attribute in `xlf` file:
```xml
...
```
After that you can delete `@locl/cli` package.
## [Online editor — ngxe.oleksanovyk.com](https://ngxe.oleksanovyk.com/)
Useful for delegating translation process. Use "Export"/"Import" options at the ngxe dashboard.