{"id":22831507,"url":"https://github.com/phrase/ngx-translate-phraseapp","last_synced_at":"2025-10-27T08:50:15.070Z","repository":{"id":38420587,"uuid":"119960159","full_name":"phrase/ngx-translate-phraseapp","owner":"phrase","description":"Integrate the Phrase In-Context Editor with ngx-translate","archived":false,"fork":false,"pushed_at":"2024-12-12T08:33:40.000Z","size":2242,"stargazers_count":3,"open_issues_count":12,"forks_count":1,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-14T18:22:18.440Z","etag":null,"topics":["angular","angularjs","i18n","l10n","ngx-translate","phraseapp","translation"],"latest_commit_sha":null,"homepage":"https://phrase.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/phrase.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-02T09:17:22.000Z","updated_at":"2024-12-12T08:33:43.000Z","dependencies_parsed_at":"2023-12-05T17:31:40.311Z","dependency_job_id":"983cb5f2-cf90-4d98-95d2-e1af75323c4b","html_url":"https://github.com/phrase/ngx-translate-phraseapp","commit_stats":{"total_commits":59,"total_committers":13,"mean_commits":4.538461538461538,"dds":0.6610169491525424,"last_synced_commit":"28149316626091871aee62bb35d3d531af017616"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phrase%2Fngx-translate-phraseapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phrase%2Fngx-translate-phraseapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phrase%2Fngx-translate-phraseapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phrase%2Fngx-translate-phraseapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phrase","download_url":"https://codeload.github.com/phrase/ngx-translate-phraseapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250501353,"owners_count":21441008,"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","angularjs","i18n","l10n","ngx-translate","phraseapp","translation"],"created_at":"2024-12-12T20:26:16.994Z","updated_at":"2025-10-27T08:50:10.025Z","avatar_url":"https://github.com/phrase.png","language":"TypeScript","funding_links":[],"categories":["Development Utilities"],"sub_categories":["Internationalization"],"readme":"# ngx-translate-phraseapp\n\n**ngx-translate-phraseapp** is the official library for integrating [Phrase Strings In-Context Editor](https://support.phrase.com/hc/en-us/articles/5784095916188-In-Context-Editor-Strings) with [ngx-translate](https://github.com/ngx-translate/core) in your Angular application.\n\n\n## Ivy\nSince Angular 13 the View Engine has been removed, and since 1.0.0 the `ngx-translate-phraseapp` package uses new version of Angular which might cause old projects to break. In this case try major version 0 package of this repository.\n\n## :scroll: Documentation\n\n### Prerequisites\n\nTo use ngx-translate-phraseapp with your application you have to:\n\n* Sign up for a Phrase Strings account: [https://phrase.com/signup](https://phrase.com/signup)\n* Use [ngx-translate](https://github.com/ngx-translate/core) module for localization in your Angular 2+ app\n\n### Demo\n\nYou can find a demo projects in `./examples` directory:\n- [example for Angular 11](https://github.com/phrase/ngx-translate-phraseapp/tree/master/examples/angular11). \n- [example for Angular 17](https://github.com/phrase/ngx-translate-phraseapp/tree/master/examples/angular17).\n \nExamples have their own `README.md`s with instructions how to run them.\n\n### Installation\n\n#### NPM\n\n```bash\nnpm install ngx-translate-phraseapp\n```\n\n#### Build from source\n\nYou can also build it directly from source to get the latest and greatest:\n\n```bash\nnpm run dist\n```\n\n### Usage\n\n#### Configure\n\n```ts\nimport { initializePhraseAppEditor, PhraseConfig } from 'ngx-translate-phraseapp';\n\nlet config: PhraseConfig = {\n  projectId: '\u003cYOUR_PROJECT_ID\u003e',\n  accountID: '\u003cYOUR_ACCOUNT_ID\u003e'\n  phraseEnabled: true,\n};\n```\n\nYou can find the Project-ID in the Project overview in the Phrase Strings Translation Center. The Account-ID can be found in the Organization settings.\n\nBy default, the In-Context Editor’s document parser converts all keys to lowercase. If you’re experiencing issues with this behavior and want to use case-sensitive keys within the In-Context Editor, consider disabling the automatic lowercase feature:\n\n```ts\nlet config: PhraseConfig = {\n  // ...\n  autoLowercase: false\n}\n```\n\n#### Using the old version of the ICE\nStarting from version `1.1.0` new version of ICE is supported and used by default.\n\nTo use the old version of ICE, use option `useOldICE: true` in your PHRASEAPP_CONFIG or integration options\n```js\nlet config = {\n  projectId: '\u003cYOUR_PROJECT_ID\u003e',\n  accountID: '\u003cYOUR_ACCOUNT_ID\u003e',\n  phraseEnabled: true,\n  useOldICE: true,\n};\n\ninitializePhraseAppEditor(config);\n```\n\n#### Using the US Datacenter with ICE\n\nIn addition to the settings in your config, set the US datacenter to enable it working with the US endpoints.\n```js\n  datacenter: 'us'\n```\n\n### Code examples\n\nAdd the following snippets to your Angular app:\n\n\u003cbr\u003e\n\n`app.component.ts`\n\n```ts\nimport { initializePhraseAppEditor, PhraseAppCompiler, PhraseConfig} from 'ngx-translate-phraseapp'\n\nlet config: PhraseConfig = {\n  projectId: '\u003cYOUR_PROJECT_ID\u003e',\n  accountID: '\u003cYOUR_ACCOUNT_ID\u003e'\n  phraseEnabled: true,\n};\n\ninitializePhraseAppEditor(config);\n```\n\u003cbr\u003e\n\u003cbr\u003e\n\n`app.module.ts`\n\n```js\nimport { TranslateModule, TranslateLoader, TranslateCompiler } from '@ngx-translate/core';\nimport { HttpClientModule, HttpClient } from '@angular/common/http';\nimport { PhraseAppCompiler } from 'ngx-translate-phraseapp'\nimport { AppComponent } from './app.component';\n\n\nexport function HttpLoaderFactory(http: HttpClient) {\n  return new TranslateHttpLoader(http);\n}\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    HttpClientModule,\n    TranslateModule.forRoot({\n      loader: {\n        provide: TranslateLoader,\n        useFactory: HttpLoaderFactory,\n        deps: [HttpClient]\n      },\n      compiler: {\n        provide: TranslateCompiler,\n        useClass: PhraseAppCompiler\n      }\n    }),\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\n```\n\nIf this does not work for you, you can also integrate the [JavaScript snippet manually](https://help.phrase.com/help/integrate-in-context-editor-into-any-web-framework).\n\n## :white_check_mark: Commits \u0026 Pull Requests\n\nWe welcome anyone who wants to contribute to our codebase, so if you notice something, feel free to open a Pull Request! However, we ask that you please use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification for your commit messages and titles when opening a Pull Request.\n\nExample: `chore: Update README`\n\n## :question: Issues, Questions, Support\n\nPlease use [GitHub issues](https://github.com/phrase/ngx-translate-phraseapp/issues) to share your problem, and we will do our best to answer any questions or to support you in finding a solution.\n\n## :memo: Changelog\n\nDetailed changes for each release are documented in the [changelog](https://github.com/phrase/ngx-translate-phraseapp/releases).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphrase%2Fngx-translate-phraseapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphrase%2Fngx-translate-phraseapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphrase%2Fngx-translate-phraseapp/lists"}