{"id":13807513,"url":"https://github.com/navix/ngxe","last_synced_at":"2025-04-11T22:32:59.495Z","repository":{"id":57132064,"uuid":"331364865","full_name":"navix/ngxe","owner":"navix","description":"📜 Angular 11.1+ JSON Translations Editor.","archived":false,"fork":false,"pushed_at":"2024-05-02T13:59:16.000Z","size":1042,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T18:40:06.082Z","etag":null,"topics":["angular","i18n","internationalization","localization","translation","translations"],"latest_commit_sha":null,"homepage":"https://ngxe.oleksanovyk.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/navix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-20T16:27:49.000Z","updated_at":"2024-05-04T03:34:15.000Z","dependencies_parsed_at":"2024-08-04T01:07:42.303Z","dependency_job_id":"d60e3b85-55fb-4544-9f54-8582ad1c5206","html_url":"https://github.com/navix/ngxe","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navix%2Fngxe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navix%2Fngxe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navix%2Fngxe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navix%2Fngxe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/navix","download_url":"https://codeload.github.com/navix/ngxe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248490013,"owners_count":21112671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","i18n","internationalization","localization","translation","translations"],"created_at":"2024-08-04T01:01:26.249Z","updated_at":"2025-04-11T22:32:59.460Z","avatar_url":"https://github.com/navix.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Angular"],"readme":"[![npm version](https://badge.fury.io/js/ngxe.svg)](https://www.npmjs.com/package/ngxe)\n![CI](https://github.com/navix/ngxe/actions/workflows/ci.yml/badge.svg)\n\n# 📜 ngxe\n\nAngular 11.1+ JSON Translations Editor.\n\nA simple UI for your translations: hosted on NPM, runs on your dev machine.\n\n### Features\n\n* Works directly with your files, no additional routine.\n* Any number of locales.\n* Diff changes.\n* Filters, handy pagination.\n* Suggestions based on similar sources.\n* Themes: light, solarized, dark.\n\n![ngxe screenshop](./screenshot.png)\n\n\n## Installation\n\n```shell\n$ npm i ngxe -D\n```\n\n\n## Usage\n\n#### Create `ngxe.json` config file in the root:\n\n```json\n{\n  \"name\": \"Project Name\",\n  \"input\": \"path/to/messages.json\",\n  \"output\": {\n    \"source\": \"path/to/messages.source.json\",\n    \"translations\": [\n      {\n        \"locale\": \"de\",\n        \"path\": \"path/to/messages.de.json\"\n      }\n    ]\n  }\n}\n```\n\n* `input` - file generated by Angular, you can add it to `.gitignore`\n* `output.source` - copy of the input file, but ordered by keys (need for further transitions and smooth committing to Git).\n* `output.translations` - target locales.\n\n#### Extract translations from your project in JSON format:\n\n```shell\n$ ng extract-i18n --format=json\n```\n\nThe editor works best if i18n messages have IDs, but it is not necessary:\n\n```\n\u003cdiv i18n=\"@@MSG_ID\"\u003eMessage with ID\u003c/div\u003e\n...\n$localize`:@@MSG_ID_2:Message with ID 2`;\n```\n\n#### Use ngxe:\n\n```shell\n$ npx ngxe\n```\n\nBrowser should open the app (http://localhost:7600/).\n\nUse the ngxe app to update messages and press `Save Project` (all `output` files will be updated).\n\n###### Optional config path:\n\n```shell\n$ npx ngxe -p=./path/to/ngxe.json\n```\n\n#### Build your app\n\n1. You can use the default flow with separated build for each lang.\n2. **Or** import messages on the app bootstrapping in `main.ts`:\n\n```ts\nimport { loadTranslations } from '@angular/localize';\n\n...\n\nloadMessages()\n  .then(() =\u003e {\n    platformBrowserDynamic().bootstrapModule(AppModule);\n  })\n  .catch(err =\u003e console.error(err));\n  \nasync function loadMessages() {\n  // Detect lang and compile proper path to messages here:\n  const path = ...;\n  const m = await import(path);\n  loadTranslations(m.translations);\n}\n```\n\n\n## Config\n\nInterface of the `ngxe.json` file: [meta/config.ts](/projects/meta/config.ts)\n\n\n## Convert existing `xlf` files to `json`\n\n```shell\n$ npm i @locl/cli -D\n$ npx locl convert -s=path/to/messages.de.xlf -f=json -o=path/to/messages.de.json\n```\n\nYou 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.`\n\nMake sure you have the `target-language` attribute in `xlf` file:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\" ?\u003e\n\u003cxliff version=\"1.2\" xmlns=\"urn:oasis:names:tc:xliff:document:1.2\"\u003e\n  \u003cfile source-language=\"en\" target-language=\"de\" ...\u003e\n    ...\n```\n\nAfter that you can delete `@locl/cli` package. \n\n\n## [Online editor — ngxe.oleksanovyk.com](https://ngxe.oleksanovyk.com/)\n\nUseful for delegating translation process. Use \"Export\"/\"Import\" options at the ngxe dashboard.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnavix%2Fngxe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnavix%2Fngxe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnavix%2Fngxe/lists"}